如何在使用 useRef 钩子接收到 child 的引用后重新渲染 parent 组件？

Question

我正在努力解决一个烦人的问题：

我有一个 parent 组件和一个 child 组件。 child 具有绝对定位和动态高度。我需要根据 child 的高度计算 parent 的边距。我尝试做类似

的事情

const Parent = () => {
  const childRef = useRef(null);
  return (
     <Child saveRef={ref} />
);

const Child = ({saveRef}) => (<div ref={saveRef}> </div>);

但问题是 Parent 组件在 Ref 完成时不会重新呈现。如何在收到 Ref 后重新渲染 Parent 组件？

在此先感谢您的帮助和建议。

Answer 1

在初始装载时运行在父级中写入一个效果。此效果将运行在 ref 初始化并渲染 child 后。在此之后在父级中维护一个状态，这是您需要计算的边距，一旦计算出边距更新状态

const Parent = () => {
  const childRef = useRef(null);
  const [margin, updateMargin] = useState(0);
  useEffect(() => {
     // calculate margin. Let call it margin
     updateMargin(margin);
  }, []);

  return (
     <Child saveRef={ref} />
);

const Child = ({saveRef}) => (<div ref={saveRef}> </div>);

编辑： 为了在 window 调整大小时更新，您需要在 window 调整大小时添加一个事件监听器并重新计算高度

const Parent = () => {
  const childRef = useRef(null);
  const [margin, updateMargin] = useState(0);
  useEffect(() => {
     window.addEventListener('resize', handleResize);
     () => {
         window.removeEventListener('resize', handleResize);
     }
  }, []);

  const handleResize = () => {
       // use ref, calcualte margin and update
  }
  return (
     <Child saveRef={ref} />
);

Answer 2

您可以将函数作为 prop 从父级传递给子级，并在需要重新渲染父级时调用该函数。更改状态会触发渲染。所以在函数中你可以改变一个状态。

class Parent extends React.Component{
 state = {ref : null}

 handleRef = ref => {
  this.setState({ ref });
  // your add you method for changing margin
 }

 render(){
   return <Child ref={this.state.ref} handleRefChange={this.handleRef} />
 }
}

将ref保存在父组件中，调用子组件的handleRefChange进行更新

如何在使用 useRef 钩子接收到 child 的引用后重新渲染 parent 组件？

How to rerender parent component after receiving child's ref with useRef hook?

reactjs

react-hooks