react中如何让父元素依据子元素高度动态添加高度

在React中，可以使用Refs来获取子元素的高度，然后将其传递给父组件，从而动态设置父元素的高度。具体实现步骤如下：

1. 在子组件中，使用Refs获取子元素的高度。可以使用React.createRef()来创建Refs对象，然后在子元素的渲染函数中将Refs绑定到子元素的DOM节点上。

class ChildComponent extends React.Component {
  constructor(props) {
    super(props);
    this.childRef = React.createRef();
  }

  render() {
    return (
      <div ref={this.childRef}>
        // 子元素内容
      </div>
    );
  }
}

2. 在子组件中，使用componentDidMount()方法，将子元素的高度传递给父组件。这个方法会在子元素挂载完成后自动调用。

class ChildComponent extends React.Component {
  componentDidMount() {
    const height = this.childRef.current.offsetHeight;
    this.props.onHeightChange(height);
  }

  render() {
    return (
      <div ref={this.childRef}>
        // 子元素内容
      </div>
    );
  }
}

3. 在父组件中，定义一个状态变量来保存子元素的高度，然后将这个状态变量传递给子组件。

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { height: 0 };
    this.handleHeightChange = this.handleHeightChange.bind(this);
  }

  handleHeightChange(height) {
    this.setState({ height: height });
  }

  render() {
    return (
      <div style={{ height: this.state.height }}>
        <ChildComponent onHeightChange={this.handleHeightChange} />
      </div>
    );
  }
}

在这个例子中，父元素的高度会根据子元素的高度来动态设置。当子元素的高度发生变化时，子组件会将新的高度传递给父组件，父组件会重新渲染并设置自己的高度。