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

Question

我正在学习反应，需要你的指导。我计划实现一个基于<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。

Answer 1

当您将组件呈现为

您实际上是将MenuItem's作为子级传递给MenuContainer。所以你可以把MenuContainer写成

const MenuContainer = ({children}) => {
   return <ul>{children}</ul>
}

和MenuItem作为

const MenuItem = ({ text, target}) => {
     return <li><a href={target}>{text}</a><li>
}

它会复制你的结构

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