Question

我正在使用一个简单的refCallback来衡量组件的大小：

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

与Chrome开发工具相比，结果不正确，因此我开始进行挖掘，发现如果我没有将App.scss加载到组件中，则它在控制台中显示了正确的大小。

因此，在简单检查之后，我从App.scss中删除了所有样式，仅添加了：

.wrapper { margin: 0; }

我看到boundingClientRect再次出错。

这与Webpack有关，我想应该将应用样式的JS加载到哪里。但是，refCallback已经启动。将其移动到componentDidUpdate或componentDidMount没什么区别，这是有道理的。 DOM已加载，样式却没有。...

解决此问题的正确方法是什么？有没有一种方法可以检查样式表是否已加载？

Answer 1

我认为我自己解决了这一问题，只需将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>
        )
    }
}

使用外部样式表测量React中的组件大小不正确

1 个答案: