无法读取属性“包含”为空

Question

我有一个带有下拉菜单的基于反应的应用程序，此下拉菜单用作导航。我必须实现的是，当我在下拉菜单之外单击时，下拉菜单应该关闭。我尝试使用 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
      };