ul和li元素的“组件化”最佳实践

Question

我正在学习React，需要您的一些指导。我打算实现基于<ul>的菜单。

<ul>
  <li><a href="/link1">Menu One</a></li>
  <li><a href="/link2">Menu Two</a></li>
</ul>

我可以将以上列表转换为：

<MenuContainer>
    <MenuItem text="Menu One" target="/link1" />
    <MenuItem text="Menu Two" target="/link2" />
</MenuContainer>

我的主要问题是如何呈现<MainContainer>组件，因为我必须在开始（<ul>）和结束标记（</ul>）中包括其所有子组件。

更新1

Header.js：

<MenuHeader target="EnterpriseMenuContainer" text="Enterprise" />
<MenuContainer id="EnterpriseMenuContainer">
    <MenuItemLink text="Company" target="/companies" />
    <MenuItemLink text="Site" target="/sites" />
</MenuContainer>

MenuHeader.js（仅render()）：（正在运行）

return (
  <li>
    <span onClick=this.handleMenuHeaderClick>
      this.props.text
    </span>
  </li>
)

MenuItemLink.js（仅render()）：

return (
  <li><a href=this.props.target>this.props.text</a></li>
)

我不知道如何写MenuContainer。