React实现点击元素外关闭功能时报className为null错误如何解决

你遇到的报错和逻辑问题主要有以下几点：

• 报错的直接原因：访问e.target.parentElement.className前没有做非空校验。当点击的元素是DOM树最顶层节点（比如<html>标签）、或者点击的元素刚好在事件触发前被从DOM中移除，e.target.parentElement会返回null，此时访问className属性就会抛出对应的类型错误。你只保留单个判断条件时功能正常，就是因为此时不需要访问可能为null的parentElement属性，所以不会触发报错。
• 隐藏的逻辑漏洞：现有判断逻辑仅覆盖了当前点击元素和直接父元素的场景，如果.ft-btn内部有多层嵌套子元素，点击深层子元素时会被误判为点击了按钮外部。
• 类名匹配不严谨：className.includes的匹配逻辑会命中包含ft-btn片段的其他类名（比如ft-btn-wrapper），导致错误匹配。
• 事件监听未清理：当前useEffect没有返回事件清除函数，每次sortOpen或filterOpen变化时都会重复绑定点击事件，会造成内存泄漏和逻辑异常。

现有写法快速修复 #

增加空值保护，同时用classList.contains替换includes保证类名匹配准确：

useEffect(() => {
  function handleClickOutside(e) {
    // 可选链语法自动做空值判断
    const isClickInside = e.target.classList?.contains("ft-btn") 
      || e.target.parentElement?.classList?.contains("ft-btn")
    if (!isClickInside) {
      setSortOpen(false);
      setFilterOpen(false);
    }
  }

  document.addEventListener("click", handleClickOutside);
  // 组件卸载/依赖更新时清除事件监听
  return () => document.removeEventListener("click", handleClickOutside);
}, [sortOpen, filterOpen]);

更规范的通用实现（推荐） #

用ref绑定目标元素，通过contains方法判断点击范围，不受元素嵌套层级影响，判断更准确：

// 为按钮/目标容器创建ref
const ftBtnRef = useRef(null);

useEffect(() => {
  function handleClickOutside(e) {
    // 点击元素不在ref包含的DOM范围内时触发关闭
    if (ftBtnRef.current && !ftBtnRef.current.contains(e.target)) {
      setSortOpen(false);
      setFilterOpen(false);
    }
  }

  document.addEventListener("click", handleClickOutside);
  return () => document.removeEventListener("click", handleClickOutside);
}, [sortOpen, filterOpen]);

// 渲染时绑定ref到对应元素
// <button className="ft-btn" ref={ftBtnRef}>操作按钮</button>

内容的提问来源于stack exchange，提问作者itsMe