Ошибка импорта пользовательских хуков в React 16.7.0-alpha - PullRequest
Новая
       7

Ошибка импорта пользовательских хуков в React 16.7.0-alpha

0 голосов
/ 29 октября 2018

Играю с новым хуком RFC в действии и не могу заставить мой хук работать должным образом. Не уверен, что происходит на моем конце или ошибка в самой альфа-версии React.

Я пытался создать зацепку за пределами клика. Я смог заставить его работать с этим кодом.

. / 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;

Однако, когда я пытаюсь обернуть это в пользовательский хук, который я могу использовать повторно и импортировать в свой компонент. Как то так ...

. / Крючки 

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;

Сначала я подумал, что это проблема с горячей перезагрузкой, но после удаления я все еще получаю эту ошибку:

Uncaught Error: хуки можно вызывать только внутри тела функции компонент.

Эта проблема возникает только при использовании импорта и экспорта. Если я скопирую ту же пользовательскую функцию ловушки и вставлю ее поверх моего компонента, она будет работать правильно.

Полагаю, я делаю что-то тупое или недостаточно хорошо прочитал документы.

Приветствия

...