调用 React 钩子 useRef 和 useEffect 在 forwardRef 回调中使用时会给出无效的钩子错误

Question

我在 react-table rowSelection 中使用了以下代码，它给出了以下编译错误。

const IndeterminateCheckbox = React.forwardRef(
    ({ indeterminate, ...rest }, ref) => {
      const defaultRef = React.useRef(null);
      const resolvedRef = ref || defaultRef;

      React.useEffect(() => {
        resolvedRef.current.indeterminate = indeterminate;
      }, [resolvedRef, indeterminate]);

      return (
        <>
          <input type="checkbox" ref={resolvedRef} {...rest} />
        </>
      );
    }
  );

React Hook "React.useRef" 不能在回调中调用。 React Hooks 必须在 React 函数组件或自定义 React Hook 函数中调用 react-hooks/rules-of-hooks

React Hook "React.useEffect" 不能在回调中调用。 React Hooks 必须在 React 函数组件或自定义 React Hook 函数中调用 react-hooks/rules-of-hooks