每次渲染时获取组件的高度

Question

嘿，伙计们，基本上我正在使用 react 并且我想通过道具获得父 div 的高度，并使其具有相同高度的孩子。每次调整窗口大小时都会呈现父 div。我尝试使用componentDidMount 和setState 来获取父级的高度，但componentDidMount 仅在我的父级div 第一次渲染时被调用。

我不能在render()function 中使用ReactDOM.findDOMNode(this).clientHeight。

为简化起见，以下是步骤：

• （每次）调整窗口大小
• Div1 被渲染
• 获取 Div1 高度并设置它的状态
• 通过 props 将其传递给 Div2。

有什么想法吗？

这是一段代码：

import React, { Component } from 'react';
import Div2 from './Div2';

    class Div1 extends Component {
      constructor(props){
        super(props);
        this.state = {
          height: 0
        };
      }

      componentDidMount() {
      var height = (ReactDOM.findDOMNode(this).clientHeight);
      this.setState({height: height})
      }    

      render() { 
         return(    
          <div className='Div1'>    
            <Div2 height={this.state.height}/>   
          </div>    
      );
      }
    }

    export default Div1;

Answer 1

您必须在以下 3 个地方更新您父母的state 新高度：

1. componentDidMount 将在第一个 render 之后调用（实际上会出现第一次父母的 div）。
2. componentDidUpdate 在render-ing 之后调用，由props 和state 更新引起。只有当您实际使用任何 props 并且它们的更新可能导致 div 的高度发生变化时，您才需要这样做。
3. 调整窗口大小。

您必须使用refs 在render 方法中获取父div 的DOM 元素。之后你可以在componentDidMount 和componentDidUpdate 中使用它（请查看React Component Lifecycle 文档）。

将所有内容组合在一起会产生以下代码，其中Foo 将其根 div 高度传递给Bar：

class Bar extends React.Component {
  render() {
    return (
      <div className='bar' style={{height: `${this.props.height / 2 }px`}} />
    );
  };
};

class Foo extends React.Component {
  constructor() {
    super();
    this.state = { height: 0 };
    this.updateHeight = this.updateHeight.bind(this);
  }

 componentDidMount() {
   this.updateHeight();
   window.addEventListener("resize", this.updateHeight);
 }

 componentWillUnmount() {
   window.removeEventListener("resize", this.updateHeight);
 }

 componentDidUpdate() {
   this.updateHeight();
 }

 updateHeight() {
   if (this.state.height != this.div.clientHeight)
     this.setState({ height: this.div.clientHeight })
 }

 render() {
    return (
      <div ref={ div => { this.div = div; } } className='foo'>
        <Bar height={this.state.height} />
      </div>
    );
  }
}

ReactDOM.render(<Foo/>, document.getElementById('app'));

可以在here找到工作示例。