'componentisation' of ul 和 li 元素的 React 最佳实践

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>

菜单Header.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 作为 children 传递给 MenuContainer。所以你可以把 MenuContainer 写成

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

和菜单项为

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>

'componentisation' of ul 和 li 元素的 React 最佳实践

React best practice of 'componentisation' of ul and li elements

reactjs

react-component