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

问题描述 投票:-1回答:1

我正在学习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

reactjs react-component
1个回答
0
投票

将组件呈现为时

© www.soinside.com 2019 - 2024. All rights reserved.