在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-向DOM元素添加Ref。

在您的示例中，对于您的<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>

一旦拥有对元素的引用，就可以使用该元素上任何DOM元素的方法和属性。例如，要获取其高度，可以使用Element.clientHeight：

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

工作中的JSFiddle