在React 16.7.0-alpha中导入自定义钩子时出错

Question

开始在反应中使用新的钩子RFC，无法使我的自定义钩子正常工作。不知道到底是怎么回事还是React alpha本身的错误。

我一直试图创建一个外部单击钩子。我能够使用此代码进行操作。

./ dropdown_builtin_hooks

const DropDownWrapper = React.memo(props => {
  const { user, className } = props;
  const ref = useRef(null);
  const [active, setActive] = useState(false);

  useEffect(() => {
    const handleDOMClick = event => {
      console.log(event.target);
      if (active && !!ref && !(event.target === ref.current || ref.current.contains(event.target))) {
        console.log("Clicked outside of wrapped component");
        setActive(false);
      }
    };
    window.addEventListener("click", handleDOMClick);
    return () => {
      window.removeEventListener("click", handleDOMClick);
    };
  });

  const handleDropDown = (): void => {
    setActive(true);
  };

  return (
    <div ref={ref} className={className} >
      <Toggler onClick={handleDropDown}>
        {active ? (
          <StyledDropUpArrow height="1.5em" filled={false} />
        ) : (
          <StyledDropDownArrow height="1.5em" filled={false} />
        )}
      </Toggler>
      {active && (
        <DropDown/>
      )}
    </div>
  );
});

export default DropDownWrapper;

但是，当我尝试将其包装在自定义钩子中时，可以重用并将其导入到我的组件中。像这样...

./ hooks

export function useClickedOutside<RefType = any>(
  initialState: boolean = false,
): [React.RefObject<RefType>, boolean, Function] {
  const ref = useRef(null);
  const [active, setActive] = useState(initialState);

  useEffect(() => {
    const handleDOMClick = event => {
      console.log(event.target);
      if (active && !!ref && !(event.target === ref.current || ref.current.contains(event.target))) {
        console.log("Clicked outside of wrapped component");
        setActive(false);
      }
    };
    window.addEventListener("click", handleDOMClick);
    return () => {
      window.removeEventListener("click", handleDOMClick);
    };
  });
  return [ref, active, setActive];
}

./ dropdown_custom_hook

const DropDownWrapper = React.memo(props => {
  const { user, className } = props;
  const [ref, active, setActive] = useClickedOutside(false);

  const handleDropDown = (): void => {
    setActive(true);
  };

  return (
    <div ref={ref} className={className} >
      <Toggler onClick={handleDropDown}>
        {active ? (
          <StyledDropUpArrow height="1.5em" filled={false} />
        ) : (
          <StyledDropDownArrow height="1.5em" filled={false} />
        )}
      </Toggler>
      {active && (
        <DropDown/>
      )}
    </div>
  );
});

export default DropDownWrapper;

起初，我认为这是热重装的问题，但删除后仍然出现此错误：

  

未捕获的错误：只能在函数体内调用钩子   组件。

只有在使用进出口时才会出现此问题。如果我复制相同的自定义钩子函数并将其粘贴到我的组件上方，则它可以正常工作。

我认为我做的有些愚蠢，或者没有足够好地阅读文档。

欢呼