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>

一旦你有一个参考元素，你可以使用方法＆amp;其上任何DOM元素的属性。例如，要获得其高度，您可以使用Element.clientHeight：

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

Working JSFiddle

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

1 个答案: