Блог

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

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

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

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

 .wrapper { margin: 0; }
  

Я увидел, что boundingClientRect снова ошибся.

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

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

Я думаю, что решил это сам, просто добавив 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>
        )
    }
}