Question

我遇到过一种情况，似乎我需要将一个组件的子节点传递给另一个组件的子节点，这是原始节点的兄弟节点。这并不适合我，因为它似乎违背了我所学到的是React中适当的层次结构和通信渠道。由于样式问题，我需要将组件呈现为兄弟姐妹，但我希望为使用我的组件的开发人员提供逻辑分组组件。

简而言之，我有一些按钮，其中一些按钮显示一个下拉菜单。就像各种工具栏一样。我希望菜单以模态方式弹出，所以我不想在按钮旁边放置一个子div。相反，我希望它在按钮下方渲染，只需将其组件与当前活动的任何菜单交换。

以下是我设想渲染的方式：

<ul>
  <li><button>Triggers some action elsewhere</button></li>
  <li><button>Button with menu</button></li>
  <li><a href="...">Link</a></li>
  <li><button>Button with menu</button></li>
  <li><button>Triggers some action elsewhere</button></li>
</ul>
<div class="menu-container">
  Menu content goes here
</div>

由于按钮是1-1与菜单链接，我希望开发人员使用这样的组件：

<Nav>
  <NavButton text="Triggers some action elsewhere"/>
  <NavMenu text="Button with menu">
    <Link to="/">A link</Link>
    <Box>
      ...
    </Box>
  </NavMenu>
  <NavLink>
    <Link to="/">Link</Link>
  </NavLink>
  <NavMenu text="Button with menu">
    <Link to="/">A link</Link>
    <Box>
      ...
    </Box>
  </NavMenu>
  <NavButton text="Triggers some action elsewhere"/>

  {/*
    This component is dynamically inserted by <Nav/> at this position.
    It is responsible for rendering a floating menu and controlling its
    behaviour.
  */}
  <FloatingMenu></FloatingMenu>
</Nav>

<Nav>组件将根据菜单是否打开来交换.menu-container div的内容。

EDIT！

我忘了提到这里有一个单独的组件，开发人员没有看到。 <FloatingMenu>组件由<Nav>动态插入，而不是开发人员将编写的子集的实际部分。它负责渲染实际菜单div并控制其行为。因此，我想要做的是将所有孩子从当前活动的<NavMenu/>组件移动到<FloatingMenu/>，如果没有菜单处于活动状态，则将其清空。至少这是我最初的想法。

/ EDIT！

可以这样做吗？我是在复杂化还是误解了什么？任何帮助将不胜感激！

React将孩子传给兄弟姐妹

0 个答案: