我正在尝试创建一个通用组件,可以在其他应用程序中重复使用。我需要知道组件渲染后的宽度,以便可以修改组件的内容。
我一直在尝试使用React中的不同生命周期,但没有成功。
当我尝试这样做时,我得到了屏幕的宽度,但是如果我改变窗口的大小,我会得到组件的宽度。请参见Chrome日志:
我一直在尝试使用React中的不同生命周期,但没有成功。
componentDidUpdate() {
console.log('width', this.element.offsetWidth);
}
render() {
return (
<div ref={(element) => {this.element = element }} />
);
}
当我尝试这样做时,我得到了屏幕的宽度,但是如果我改变窗口的大小,我会得到组件的宽度。请参见Chrome日志:
ComponentDidMount在渲染之前执行,因此this.element
是undefined
。
我也尝试使用不同的npm库来解决这个问题,但没有成功。
更多信息:该组件必须在不同宽度的Bootstrap列中工作。
render() {
<Row>
<Col sm={3} />
<MyComponent />
</Col>
<Col sm={9} />
<MyComponent />
</Col>
<Row>
}
澄清 我不想调整窗口大小,对于我的表述不够清晰我深感抱歉。我提到调整大小的唯一原因是当DOM已经创建并且我调整大小时,我可以在offsetWidth
中获得正确的值。我正在寻找一种解决方案,在不调整大小的情况下获取正确的值。可以是后处理函数调用、监听器、一些react魔法或其他解决方案。我的问题是我对虚拟DOM和真实DOM的了解不足。
offsetWidth
存储在state
中,每当组件改变大小时更新状态。 - Hemerson Carlinnull
。 - R. Gulbrandsen