如何使用 React Hooks 将 state 值传递给回调 function

Question

我正在使用react-modal创建一个面板，一切似乎都运行良好。

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

期望： - OnAfterOpen 应该被调用，最新的 state 值应该被传递给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

仅在顶层调用 Hooks

不要在循环、条件或嵌套函数中调用 Hook。 相反，请始终在 React function 的顶层使用 Hooks。 通过遵循此规则，您可以确保每次渲染组件时都以相同的顺序调用 Hook。 这就是允许 React 在多个 useState 和 useEffect 调用之间正确保留 Hooks 的 state 的原因。 （如果您好奇，我们将在下面深入解释。）

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

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

您可以尝试一件事：

传递您的useTop钩子的ref并在其中处理它。 如果是 null，不要做任何事情，如果它已经挂载，附加监听器并返回清理 function。

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

Answer 2

与newTop一起，您可以返回触发重新计算 newTop 的newTop 。 类似于useState的做法。 并调用它onAfterOpen 。