Question

如果我有一个包含标题的包裹 - ＆gt;身体 - ＆gt;页脚如何计算身体内容的高度。

我已经设置了我的包装器：

var DefaultWrapper = React.createClass({
render: function() {
    return <div>
      <Header currentPage={this.props.children.type.displayName} />
      {this.props.children}
      <Footer position={this.state.position} />
    </div>
  }
});

我想计算添加到this.props.children的任何组件/页面的高度。

Answer 1

您需要等到将更改刷新到DOM。根据React DOC（https://facebook.github.io/react/docs/component-specs.html#updating-componentdidupdate），它将是生命周期函数componentDidUpdate: function() {...}。

请注意，对于初始渲染，componentDidUpdate: function() {...}不会调用componentDidMount: function() {...}

在此函数中，您可以访问Header和Footer React Component之间的DOM-Element，只需获取它的高度（例如使用jQuery或＆＃39; offsetHeight＆＃39;）。

这是一个例子：

var DefaultWrapper = React.createClass({
render: function() {
    return <div>
      <Header currentPage={this.props.children.type.displayName} />
      <div ref='content'>
        {this.props.children}
      </div>
      <Footer position={this.state.position} />
    </div>
  },
componentDidUpdate: function() {
  // do whatever you want
  var heightOfContent = this.getContentHeight();
  },
componentDidMount: function() {
  // on your first render componentDidMount is called instead
  // of componentDidUpdate

  var heightOfContent = this.getContentHeight();
  // do whatever you want
  },
getContentHeight: function() {
  // get the DOM element of the content and get its height
  return this.refs.content.offsetHeight
  }
});

当然你也可以简单地跳过ref并简单地添加一个id属性并使用纯JS或jQuery访问DOM-Element

找出反应组分中体内含量的高度

1 个答案: