反应-当另一个打开时关闭所有其他下拉菜单

Question

我正在努力了解如何更改组件的状态，以便在单击另一个菜单时关闭所有其他下拉菜单。在Javascript中，这相当简单。

// Nav Items
showMenuHandler(event) {
  event.preventDefault();

  this.setState({ showMenu: !this.state.showMenu });
}

<Item>
  <Link onClick={this.showMenuHandler}>{this.props.children}</Link>
    {
      this.state.showMenu
          ? (
            <Dropdown>
              {this.props.children}
            </Dropdown>
      ) : null
    }
  </Item>

一个简单的条件，用于切换状态，以便在单击时打开和关闭dropDown组件。但是，可以说我在多个地方都有Item组件，并想在另一个组件打开之前关闭所有其他Dropdowns。最好的方法是什么？

我想过要通过List组件传递状态，如下所示：

<List>
  {NavTitles.map(Title => (
    <NavItem key={Title} open={this.state.showMenu}>{Title}</NavItem>
  ))}
</List>

然后我可以将click事件添加到List组件并更改状态？

这是解决问题的最好方法吗？