React点击子组件内部元素意外触发父组件Container隐藏问题

这个问题是DOM更新时序+事件冒泡机制共同导致的误判，具体流程如下：

• useClickOutside给document绑定的click监听在事件冒泡阶段触发，核心判断逻辑是校验点击目标是否在Container的DOM节点内部，不在则触发Container隐藏逻辑。
• 点击.item-content元素时，首先触发该元素绑定的React onClick回调，执行setDisplayItem(false)，React触发重渲染，直接将.item-content元素从DOM树中移除。
• 等事件冒泡到document、执行useClickOutside的判断逻辑时，被点击的.item-content已经脱离了Container的DOM子树，此时containerRef.current.contains(e.target)会返回false，Hook误判本次点击发生在Container外部，进而执行setDisplay(false)导致Container被同步隐藏。

按照要求保留现有useClickOutside实现的前提下，只需要在.item-content的点击回调中阻止事件冒泡到document，避免外部点击检测逻辑被误触发即可。考虑到React合成事件和原生事件的绑定差异，最稳妥的写法是调用原生事件的stopImmediatePropagation方法，可兼容所有React版本：

const Item = () => {
  const [displayItem, setDisplayItem] = useState(false);
  return (
    <div>
      <button onClick={() => setDisplayItem(true)}>Show Item's content</button>
      {displayItem && (
        <div
          className='item-content'
          onClick={(e) => {
            // 阻止document上后续绑定的click监听执行，避免触发外部点击检测
            e.nativeEvent.stopImmediatePropagation();
            setDisplayItem(false);
          }}
        />
      )}
    </div>
  );
};

补充说明：点击按钮展示内容时不会触发同类问题——因为点击按钮是往DOM中插入元素，事件冒泡到document时按钮本身就在Container内部，contains判断可以正常返回true，不需要额外添加阻止冒泡的逻辑。

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