我正在学习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
。
将组件呈现为时