<\!-- This element's content..."> <\!-- This element's content..."/> <\!-- This element's content..."> <\!-- This element's content...">

ReactJS-获取元素的高度

JavaScript

TomSam

2020-03-12

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

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

第1122篇《ReactJS-获取元素的高度》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

3个回答
老丝村村Stafan 2020.03.12

看到这个小提琴(实际上更新了您的)

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

Mandy小卤蛋凯 2020.03.12

您还希望在元素上使用refs而不是使用document.getElementById,这只是稍微健壮的事情。

Mandy古一 2020.03.12

我发现有用的npm包https://www.npmjs.com/package/element-resize-detector

针对元素的优化的跨浏览器调整大小侦听器。

可以与React组件或功能组件一起使用(对React钩子特别有用)

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android