Неверный показатель размера компонента в React с внешними таблицами стилей - PullRequest
Новая
       23

Неверный показатель размера компонента в React с внешними таблицами стилей

0 голосов
/ 06 марта 2019

Я использую простой refCallback для измерения размера компонента: 

<div className="wrapper" ref={(el) => console.log(el.getBoundingClientRect())}>Lorem....</div>

Это дало неверные результаты, по сравнению с Chrome Dev Tools, поэтому я начал копать и узнал, если я незагрузить мой App.scss в моем компоненте он показал правильные размеры в консоли.

Итак, после простой проверки, где я удалил все стили из App.scss и добавил только: 

.wrapper { margin: 0; }

, я увидел, что boundingClientRect снова был неправильным.

Это связано с Webpack, я полагаю, где загружен JS, который применяет стили.Однако refCallback уже инициирован.Перемещение на componentDidUpdate или componentDidMount не имело значения, что имеет смысл.DOM загружен, стили просто нет ....

Как правильно решить эту проблему?Есть ли способ проверить, загружены ли таблицы стилей, что он работает?

1 Ответ

0 голосов
/ 06 марта 2019

Я думаю, что решил сам, просто добавив document.body.onload в componentDidMount и обработав размер в этом обратном вызове. 

import '~/somestyles.scss'

class SizeContainer extends React.Component<IProps, any> {

    private ref = React.createRef<HTMLDivElement>();

    componentDidMount(): void {
        document.body.onload = this.onLoad
    }

    onLoad = () => {
        if (this.ref.current) {
            const els = Array.from(this.ref.current!.childNodes);
            els.forEach(el => {
                console.log((el as Element).getBoundingClientRect())
            })
        }
    };

    render() {
        const { children } = this.props;
        return (
            <div ref={this.ref}>
                { children }
            </div>
        )
    }
}
...