Question

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

我有一个父组件和一个子组件。孩子具有绝对的定位和动态的身高。我需要根据孩子的身高计算父母的边距。我试图做类似的事情

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

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

但是问题是，当满足Ref时，父组件不会重新呈现。收到参考后如何重新呈现父级组件？

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

Answer 1

在初始安装上运行的父项中编写一个效果。该效果将在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);
  useEffect(() => {
     window.addEventListener('resize', handleResize);
     () => {
         window.removeEventListener('resize', handleResize);
     }
  }, []);

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

Answer 2

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

AppBarHeader

将引用存储在“父”组件中，并从“子”组件调用handleRefChange以对其进行更新。

使用useRef钩子收到孩子的ref后，如何重新渲染父组件？

2 个答案: