无法使用react ref获得正确的clientWidth或clientHeight

Question

constructor(props) {
    super(props)
    this.ref = React.createRef()
}

componentDidMount() {
    const { clientWidth, clientHeight } = this.ref.current
    console.log(this.ref.current)
    console.log(clientWidth, clientHeight)
}

render() {
    return (
        <div ref={this.ref} style={{width: '100%', height: '100%'}}></div>
    )
}

我想获取元素的宽度和高度

第一个日志包含正确的值

但是第二条日志说的不同

为什么？

第一条日志：

clientHeight:783
clientLeft:0
clientTop:0
clientWidth:1385

第二次日志：

1920 248

Answer 1

感谢nubinub和DoğancanArabacı

我是javascript的新手，并且对整个参考书目一无所知

现在我知道了，Chrome控制台日志有时很慢， 到记录时为止，宽度和高度已经改变。