实际上，有一个比使用request animationframe或timeout更简单、更清晰的版本。我很惊讶居然没人提起这件事: vanilla-js的onload处理程序。 如果可以，使用component did mount，如果不行，只需在jsx组件的onload处理程序上绑定一个函数。如果你想让函数运行每次渲染，也要在返回渲染函数的结果之前执行它。代码看起来是这样的:

runAfterRender = () => ｛ const myElem = document.getElementById("myElem") 如果(myElem) ｛ //做重要的事情 ｝ ｝ 呈现() ｛ this.runAfterRender () 回报( < div onLoad = {this.runAfterRender} > / /更多的东西 < / div > ） ｝

}

实际上，有一个比使用request animationframe或timeout更简单、更清晰的版本。我很惊讶居然没人提起这件事: vanilla-js的onload处理程序。 如果可以，使用component did mount，如果不行，只需在jsx组件的onload处理程序上绑定一个函数。如果你想让函数运行每次渲染，也要在返回渲染函数的结果之前执行它。代码看起来是这样的:

runAfterRender = () => ｛ const myElem = document.getElementById("myElem") 如果(myElem) ｛ //做重要的事情 ｝ ｝ 呈现() ｛ this.runAfterRender () 回报( < div onLoad = {this.runAfterRender} > / /更多的东西 < / div > ） ｝

}

在尝试了上面所有建议的解决方案后，没有运气，我发现我的一个元素在中间有CSS过渡，这就是为什么我不能得到正确的计算几何后道具改变。 所以我不得不使用onTransitionEnd监听器等待片刻，当尝试获得容器元素的DOM高度计算。 希望这能节省一些人的工作日，哈哈。

我实际上遇到了类似行为的麻烦，我在一个组件中渲染了一个视频元素，它的id属性，所以当RenderDOM.render()结束时，它加载了一个需要id来找到占位符的插件，但它找不到它。

componentDidMount()中的setTimeout与0ms修复了它:)

componentDidMount() {
    if (this.props.onDidMount instanceof Function) {
        setTimeout(() => {
            this.props.onDidMount();
        }, 0);
    }
}

我不会假装我知道为什么这个函数可以工作，但是window。当我需要在useEffect中使用Ref访问DOM元素时，getComputedStyle 100%的时间为我工作-我只能假设它将与componentDidMount一起工作。

我把它放在useEffect代码的顶部，它似乎迫使效果等待元素被绘制，然后再继续下一行代码，但没有任何明显的延迟，如使用setTimeout或异步睡眠函数。如果没有这个，当我试图访问Ref元素时，它将返回为未定义。

const ref = useRef(null);

useEffect(()=>{
    window.getComputedStyle(ref.current);
    // Next lines of code to get element and do something after getComputedStyle().
});

return(<div ref={ref}></div>);

componentDidMount ()

此方法在呈现组件后调用一次。你的代码应该是这样的。

var AppBase = React.createClass({
  componentDidMount: function() {
    var $this = $(ReactDOM.findDOMNode(this));
    // set el height and width etc.
  },

  render: function () {
    return (
      <div className="wrapper">
        <Sidebar />
          <div className="inner-wrapper">
            <ActionBar title="Title Here" />
            <BalanceBar balance={balance} />
            <div className="app-content">
              <List items={items} />
          </div>
        </div>
      </div>
    );
  }
});