React 18中搜索结果列表外点击检测报错的排查与解决请求

错误原因 #

1. ref绑定方式错误：React-Perfect-Scrollbar是自定义组件，直接使用原生ref属性无法关联到内部的滚动容器DOM节点，导致scrollRef.current为null，调用contains方法时触发报错。
2. 事件监听未清理：组件卸载后，全局点击事件监听未被移除，此时scrollRef.current已变为null，触发点击事件时调用contains就会报错。
3. 组件未挂载完成触发事件：若在组件DOM还未渲染完成时触发点击，scrollRef.current还未赋值，同样会导致调用contains时出错。

最可靠的修复方案 #

1. 正确绑定React-Perfect-Scrollbar的ref #

React-Perfect-Scrollbar提供containerRef属性用于传递ref到内部滚动容器，而非直接使用原生ref：

import PerfectScrollbar from 'react-perfect-scrollbar';
import { useRef, useState } from 'react';

const Searchbox = () => {
  const [showResults, setShowResults] = useState(false);
  const scrollRef = useRef(null);

  return (
    <div className="search-box">
      <input type="text" onClick={() => setShowResults(true)} />
      
      {showResults && (
        <PerfectScrollbar containerRef={scrollRef}>
          <div className="search-results">
            {/* 搜索结果列表内容 */}
          </div>
        </PerfectScrollbar>
      )}
    </div>
  );
};

2. 完善外部点击检测逻辑，添加null判断 #

在点击处理方法中先校验scrollRef.current的有效性，再执行后续逻辑：

const handleOutsideClick = (e) => {
  if (!scrollRef.current) return;
  
  if (!scrollRef.current.contains(e.target)) {
    setShowResults(false);
  }
};

3. 正确管理事件监听生命周期 #

使用useEffect添加全局点击监听，并在组件卸载时移除，避免组件卸载后触发事件报错：

import { useEffect } from 'react';

useEffect(() => {
  const handleClick = (e) => {
    if (scrollRef.current && !scrollRef.current.contains(e.target)) {
      setShowResults(false);
    }
  };

  document.addEventListener('click', handleClick);
  return () => {
    document.removeEventListener('click', handleClick);
  };
}, [showResults]);

将以上三个步骤结合使用，即可彻底解决报错问题，同时保证外部点击隐藏列表的功能稳定运行。

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