相关疑难解决方法(0)

在React呈现该元素后,如何获得元素的高度？

HTML

<div id="container">
<!-- This element's contents will be replaced with your component. -->
<p>
jnknwqkjnkj<br>
jhiwhiw (this is 36px height)
</p>
</div>

ReactJS

var DivSize = React.createClass({

  render: function() {
    let elHeight = document.getElementById('container').clientHeight
    return <div className="test">Size: <b>{elHeight}px</b> but it should be 18px after the render</div>;
  }
});

ReactDOM.render(
  <DivSize />,
  document.getElementById('container')
);

结果

Size: 36px but it should be 18px after the render

它正在计算渲染前的容器高度(36px).我想在渲染后获得高度.在这种情况下,正确的结果应该是18px.

https://jsfiddle.net/69z2wepo/29800/

这是我对React的一个反复出现的问题.componentDidMount保证在第一次渲染组件时触发该方法,因此它似乎是一个自然的地方,可以进行高度和偏移等DOM测量.但是,很多时候,在组件生命周期的这个阶段,我收到了错误的样式读数.该组件是在DOM,当我与调试器打破,但它尚未在屏幕上绘制.我的问题是宽度/高度设置为100%的元素.当我进行测量时componentDidUpdate- 一切正常,但此方法不会在组件的初始渲染时触发.

所以我的问题是 - 什么时候被componentDidMount解雇,因为在完成所有浏览器绘制之后它显然没有被触发.

编辑: 此Stackoverflow问题处理相同的主题:

它还引用了这个解释会发生什么的github对话