ReactJS-获取元素的高度

  • Z时代
  • 2024-01-10
  • 分类：问答

React渲染元素后如何获取元素的高度？

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

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

它正在计算渲染之前的容器高度（36像素）。我想获得渲染后的高度。在这种情况下，正确的结果应为18px。jsfiddle

回答：

看到这个小提琴（实际上更新了您的）

您需要钩住componentDidMount在render方法之后要运行的对象。在那里，您可以获得元素的实际高度。

var DivSize = React.createClass({
    getInitialState() {
    return { state: 0 };
  },
  componentDidMount() {
    const height = document.getElementById('container').clientHeight;
    this.setState({ height });
  },
  render: function() {
    return (
        <div className="test">
        Size: <b>{this.state.height}px</b> but it should be 18px after the render
      </div>
    );
  }
});
ReactDOM.render(
  <DivSize />,
  document.getElementById('container')
);
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>
<div id="container">
<p>
jnknwqkjnkj<br>
jhiwhiw (this is 36px height)
</p>
    <!-- This element's contents will be replaced with your component. -->
</div>

以上是 ReactJS-获取元素的高度 的全部内容， 来源链接： utcz.com/qa/435751.html

回到顶部