React状态更新后，如何获取渲染完成的Div高度？

你遇到的问题本质是React的setState是异步更新的——当你调用setState后，状态并不会立刻改变，DOM也不会马上重新渲染，所以只在componentDidMount里拿一次高度，或者在状态更新后直接获取，自然只能拿到初始的DOM高度。下面给你两种可靠的解决方案，同时推荐用React的ref替代直接操作DOM的方式，更符合React的设计理念。

第一步：用React Ref绑定目标DOM元素 #

先在组件中创建一个ref，用来绑定我们需要获取高度的Div：

constructor(props){
  super(props);
  this.state = {
   checksView: false,
  }
  // 创建ref对象
  this.viewRef = React.createRef();
}

然后在renderContent方法里，把ref绑定到目标Div上：

renderContent(){
  if(this.state.checksView){
   return (
    <div ref={this.viewRef}>
     {CHECKS.map(check => <div>{check}</div>)}
    </div>
   )
  }else{
   return (
    <div ref={this.viewRef}>
     {FEATURES.map(check => <div>{check}</div>)}
    </div>
   )
  }
}

方法一：使用componentDidUpdate生命周期钩子 #

componentDidUpdate会在组件状态/Props更新、且DOM重新渲染完成后触发。我们可以在这里判断状态是否变化，再获取最新高度：

componentDidUpdate(prevProps, prevState) {
  // 只有当checksView状态切换时才执行，避免不必要的重复计算
  if (prevState.checksView !== this.state.checksView) {
    const height = this.viewRef.current.clientHeight;
    console.log('更新后的Div高度:', height);
  }
}

方法二：利用setState的回调函数 #

setState的第二个参数是一个回调函数，它会在状态更新完成、DOM也重新渲染后执行，所以可以直接在这里获取最新高度：

changeView(view, event){
  event.preventDefault();
  const newChecksView = view !== "specs";
  this.setState({checksView: newChecksView}, () => {
    // 回调执行时，DOM已经完成更新
    const height = this.viewRef.current.clientHeight;
    console.log('更新后的Div高度:', height);
  });
}

补充说明 #

• componentDidMount只在组件第一次挂载时执行一次，所以它只能拿到初始渲染的高度，之后切换视图不会再触发，这就是你之前只能拿到初始值的核心原因。
• 用ref替代document.getElementById可以避免全局DOM查询的潜在问题，尤其是在组件复用或复杂DOM结构中更可靠。

内容的提问来源于stack exchange，提问作者Boky