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

在函数组件中，可以使用React Hooks来实现父元素依据子元素高度动态添加高度。具体实现步骤如下：

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

function ChildComponent(props) {
  const childRef = useRef(null);

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

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

function ChildComponent(props) {
  const childRef = useRef(null);

  useEffect(() => {
    const height = childRef.current.offsetHeight;
    props.onHeightChange(height);
  }, []);

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

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

function ParentComponent(props) {
  const [height, setHeight] = useState(0);

  function handleHeightChange(height) {
    setHeight(height);
  }

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

在这个例子中，父元素的高度会根据子元素的高度来动态设置。当子元素的高度发生变化时，子组件会将新的高度传递给父组件，父组件会重新渲染并设置自己的高度。注意，在函数组件中，需要使用useEffect() Hook来替代类组件中的componentDidMount()方法来实现获取子元素高度的操作。