Reactjs 如何在收到子组件'；s ref与useRef挂钩？

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

我有一个父组件和一个子组件。孩子有绝对位置和动态高度。我需要根据孩子的身高计算父母的边际。我试着做一些类似的事情

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

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

const Parent=（）=>{
const childRef=useRef（null）；
返回(
);
常量Child=（{saveRef}）=>（）；

但问题是，当Ref被满足时，父组件不会重新启动。 收到Ref后，如何重新提交父组件

---

提前感谢您的帮助和建议。

在初始装载时运行的父级中编写一个效果。该效果将在ref初始化并呈现子级后运行。之后，在父级中维护一个状态，该状态是您需要计算的页边距，并在计算页边距后更新状态

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

const Parent=（）=>{
const childRef=useRef（null）；
const[margin，updateMargin]=useState（0）；
useffect（（）=>{
//计算保证金，我们称之为保证金
更新边际（边际）；
}, []);
返回(
);
常量Child=（{saveRef}）=>（）；

编辑：要在调整窗口大小时更新，需要在调整窗口大小时添加事件侦听器并重新计算高度

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

const Parent=（）=>{
const childRef=useRef（null）；
const[margin，updateMargin]=useState（0）；
useffect（（）=>{
window.addEventListener（'resize'，handleResize）；
() => {
removeEventListener（'resize'，handleResize）；
}
}, []);
常量handleResize=（）=>{
//使用ref、计算边距和更新
}
返回(
);

您可以将函数作为道具从父级传递给子级，并在需要重新呈现父级时调用该函数。更改状态将触发呈现。因此，在函数中，您只需更改状态即可

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} />
 }
}

类父级扩展React.Component{
状态={ref:null}
handleRef=ref=>{
this.setState（{ref}）；
//您的“添加您”更改边距的方法
}
render（）{
返回
}
}

---

将ref存储在父组件中，并从子组件调用HandlerRefChange来更新它。

由于效果涉及DOM，这可能是

useLayoutEffect

的情况。得到了与@estus建议的相同的解决方案。但现在我遇到了不同的问题）在调整窗口大小时，我需要重新计算高度again@MikeErmolaev更新了答案