Question

使用react-modal创建一个面板时，一切似乎工作正常。

但是一旦打开模态，我需要设置模态的最高值。我正在使用钩子，并且每当尝试更新值时，都会出错，只能在React函数内部调用钩子。我尝试了所有可能的方法，但无法解决问题。

期望： -应该调用OnAfterOpen，并将最新状态值传递给pos prop。

这是我尝试过的。

function useTop() {
  const [top, setTop] = useState('100px');

  useEffect(() => {
    const handleResize = () => {
      const hasRefClientHeight = contentRef.current && contentRef.current.clientHeight;
      hasRefClientHeight < window.innerHeight ? setTop(`calc(100% - ${hasRefClientHeight}px)`) : setTop('100px');
    };
    window.addEventListener('resize', handleResize);
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return top;
}

const Panel = () => {
   // const newTop = useTop(); -- This is not working as modal content is not ready. Modal Content will be ready only if `onAfterOpen` triggers.

   <Modal pos={useTop} onAfterOpen={useTop}><div ref={contentRef}>Test</div></Modal>
};

Answer 1

实际上，挂钩规则说：

https://reactjs.org/docs/hooks-rules.html

仅位于顶层的呼叫挂钩

请勿在循环，条件或嵌套函数中调用Hook。相反，请始终在您的React函数的顶层使用挂钩。通过遵循此规则，可以确保每次渲染组件时都以相同的顺序调用Hook。这就是让React在多个useState和useEffect调用之间正确保留Hook的状态的原因。（如果您感到好奇，我们将在下面对此进行深入说明。）

这对于React来说是必须的，以确保在每个渲染周期中以完全相同的顺序调用钩子。

似乎Modal仅在挂载（打开）后才会调用useTop，即它可能会跳过第一个渲染，从而违反了钩子规则并弄乱了顺序。

您可以尝试的一件事：

将ref钩子传递给useTop，并在其中进行处理。如果为空，则不执行任何操作；如果已安装，则附加侦听器并返回清除函数。

const Panel = () => {
  const newTop = useTop(contentRef);
  <Modal pos={newTop} onAfterOpen={null}><div ref={contentRef}>Test</div></Modal>
};

Answer 2

与newTop一起，您可以返回触发newTop的重新计算的函数。与useState的操作类似。并调用它onAfterOpen。

如何使用React Hooks将状态值传递给回调函数

2 个答案: