Question

我有一个带有下拉菜单的基于 React 的应用程序，这个下拉菜单用作导航。我必须实现的是，当我在下拉菜单外单击时，应关闭下拉菜单。我尝试使用 useEffect 和 useRef。这是我的代码：

  useEffect( () => {
    const onClickOutsideNavbar = (event) => {
      if (ref.current.contains(event.target)) {
        return
      };

      setNavItemsOpen(false);
    };

    document.body.addEventListener("click", onClickOutsideNavbar)

    return () => {
      document.body.removeEventListener("click", onClickOutsideNavbar);
    }
  }, [])

我的 JSX 有一个 li，它呈现每个 nav item 和一个 ul 作为父项，还有一个 button 用于触发下拉列表和一个 div 包含所有这些。

一切正常，直到我添加了 react-router-dom 来链接我的页面。

<div ref= {ref}>
  <button onClick={handleNavToggle}>Trigger</button>
  <ul>
    <Link to="/navitem"><li>Nav Item</li></Link>
    <Link to=""><li>Nav Item</li></Link>
    <Link to=""><li>Nav Item</li></Link>
  </ul>
</div>

每当我点击第二个或第三个链接时，什么也没有发生。但是，如果我单击第一个将我带到 NavItem 的链接，那么我的 React 应用程序会在显示新组件 1 秒后崩溃。错误是

<块引用>

无法读取 null 的属性“包含”。

如果有人知道这个错误背后的原因，请向我解释。

Answer 1

我认为您的 ref 在更改到新页面后可能是 undefined。所以 contains 方法是 null。我没有足够的信息来得出结论，但您可以使用 ?操作员以防止应用程序崩溃。

if (ref?.current?.contains(event.target)) {
        return
      };

无法读取 null 的属性“包含”

1 个答案: