在 React 中单击时调用挂钩函数的最佳方法是什么

Question

我正在为我的应用程序创建一些 header，所以我尝试将挂钩放在其他文件中以便更好地组织。

但是我有点困惑，当我点击 header 中的按钮时，如何调用这个函数 useHeaderNavStatus()标记，而不在 Header 组件中创建另一个 useEffect 和 useState？可以吗还是我太瞎了？

感谢您的帮助！ :D

文件结构如下：

Header 组件

const Header = () => {
    const headerNav = useHeaderNavStatus();

    return (
      <header>
        <button
        ref={headerNav.toggleRef}
        onClick={What do I do here?}>
          Menu
        </button>
      </header>
    );
}

挂钩文件

import { useEffect, useRef, useState } from 'react';

const useHeaderNavStatus = () => {
    // Creating ref for toggle button
    const toggleRef = useRef<HTMLButtonElement>(null);

    // Creating state to know if nav is showing or not
    const [isActive, setIsActive] = useState(false);

    // This function opens and closes nav
    const updateBodyScroll = () => {
        setIsActive(!isActive);
        const body = document.body.classList;

        if (isActive) {
            body.remove('no-scroll');
        } else {
            body.add('no-scroll');
        }
    };

    // This function closes the nav on outside click
    const closeNavOnOutsideClick = (event: MouseEvent) => {
        if (!toggleRef.current?.contains(event.target as Node))
            updateBodyScroll();
    };

    // Adds and removes event listener to know the target click
    useEffect(() => {
        if (isActive) {
            window.addEventListener('mousedown', closeNavOnOutsideClick);

            return () =>
                window.removeEventListener('mousedown', closeNavOnOutsideClick);
        }
    });

    return { toggleRef, isActive };
};

Answer 1

你的挂钩还应该return一个打开导航的函数：

const openNav = () => setIsActive(true);

return { toggleRef, isActive, openNav };

然后使用它：

const Header = () => {
    const headerNav = useHeaderNavStatus();

    return (
      <header>
        <button
        ref={headerNav.toggleRef}
        onClick={headerNav.openNav}>
          Menu
        </button>
      </header>
    );
}

在 React 中单击时调用挂钩函数的最佳方法是什么

What's the best way to call a hook function on click in React

reactjs

react-hooks