Javascript 在反应组件中查找主体内容物的高度

如果我有一个包含页眉->正文->页脚的包装，如何计算正文内容的高度

我已按如下方式设置包装：

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

var DefaultWrapper=React.createClass({
render:function（）{
返回
{this.props.children}
}
});

---

我想计算添加到

this.props.children

的任何组件/页面的高度，您需要等待更改刷新到DOM。根据React DOC（），它将是生命周期函数

componentdiddupdate:function（）{…}

请注意，对于初始渲染，不会调用

componentdiddupdate:function（）{…}

，而是调用

componentDidMount:function（）{…}

在这个函数中，您可以访问页眉和页脚React组件之间的DOM元素，并简单地获取它的高度（例如，使用jQuery或“offsetHeight”）

这里有一个例子：

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
  }
});

var DefaultWrapper=React.createClass({
render:function（）{
返回
{this.props.children}
},
componentDidUpdate:函数（）{
//你想干什么就干什么
var heightOfContent=this.getContentHeight（）；
},
componentDidMount:function（）{
//在第一个渲染组件上，将调用didmount
//组件的更新
var heightOfContent=this.getContentHeight（）；
//你想干什么就干什么
},
getContentHeight:函数（）{
//获取内容的DOM元素并获取其高度
返回this.refs.content.offsetHeight
}
});

当然，您也可以简单地跳过ref，简单地添加id属性，并使用纯JS或jQuery访问DOM元素