javascript - 获取 React 组件中子元素的高度

Question

在 React 组件内，我希望能够计算每个子容器的组合高度，在本例中为三个 h3 元素，这样我就可以在动画转换时计算父 div 的确切高度它的高度。我已经看到了使用基本 js 以及使用组件安装方法的示例，但是如何仅使用 JavaScript 获取这些元素的高度？

class Div extends React.Component {
  render() {
    return (
      <div>
        <h3>Description One</h3>
        <h3>Description Two</h3>
        <h3>Description Three</h3>
      </div>
    );
  }
}

ReactDOM.render(<Div />, app);

div {
  background-color: pink;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="app"></div>

Answer 1

在 React 中，要操作 DOM，您需要使用 Refs:React Docs - Adding a Ref to a DOM element .

在您的示例中，对于您的 <h3>元素，你会做这样的事情:

    <h3 ref={(elem) => this.Line1 = elem}>Description One</h3>
    <h3 ref={(elem) => this.Line2 = elem}>Description Two</h3>
    <h3 ref={(elem) => this.Line3 = elem}>Description Three</h3>

一旦你有了一个元素的 Ref，你就可以在它上面使用任何 DOM 元素的方法和属性。例如，要获取它的高度，您可以使用 Element.clientHeight :

calcHeight() {
  return this.Line1.clientHeight + this.Line2.clientHeight + this.Line3.clientHeight;
}

Working JSFiddle