Reactjs “停止反应”；onClick"；DOM树中间的事件

想象一下这个结构：

<Item onClick={goToPage}>
  <p>Example Title</p>
  <div> // addition
    <Menu>
      <button onClick={toggleMenuItems}/>
      <MenuItems />
    </Menu>
  </div>
</Item>

示例标题

//加成

菜单组件本身有一个事件处理逻辑：它正在侦听窗口上的单击事件并关闭菜单项。这样做是因为一个页面可以有许多菜单，打开一个页面应该关闭所有其他页面

整个父项组件也必须是可单击的。项组件中的div（标记为“addition”）必须是独立的，因此它可以是菜单，也可以是其他任何内容，例如文本

这里的问题是，单击菜单上的按钮单击事件会被冒泡到条目并沿行向下，尽管条目的onClick也会被触发。如果在“onClick”菜单内停止传播，则不会再激发项的onClick，但window.onClick也会停止，其他菜单也无法关闭

---

解决这个问题的办法是什么？我如何才能在单击项时停止，而不单击行中的任何其他内容？

使用此解决方案来检测单击是在组件内部还是外部：

---

然后仅在单击内部时应用您的逻辑。

要解决此问题，我必须在单击菜单按钮（或菜单组件内的任何其他区域）时停止冒泡，并使用捕获而不是在菜单内冒泡来执行“在窗口上关闭菜单，在组件外单击”。

谢谢。这将不起作用，因为菜单位于项目内，所以它将始终在单击时检测。