如何在不同的DOM元素呈現組件

我有以下結構：如何在不同的DOM元素呈現組件

<Header /> 
<Subheader> 
    <Breadcrumbs /> 
    <Submenu /> 
</Subheader> 
<Main /> 
<Footer />

在主要組分，我已經建造了一個動態菜單，像這樣

<ul> 
    <li>#1</li> 
    <li>#2</li> 
    <li>#3</li> 
</ul>

以用作子菜單，我如何將其渲染到<Submenu />DOM而不是<Main />DOM，其中的菜單是構建的？

來源

2017-07-14 pedropeixoto

在你所有的包裝容器中（可能叫做<App />）給<Main />一個叫做sendSubmenu的函數。當你有子菜單信息時，調用該函數，然後<App />可以使用setState來保存它。應用程序可以將狀態值傳遞給<Subheader />和<Submenu />。

您應該儘可能地將數據呈現給子菜單組件，然後只需將它發送給列表中的一組信息即可呈現。

模糊素描：如果你使用像Redux的狀態管理

<App> 
    <Header /> 
    <Subheader subMenu={this.state.subMenu}> // State from App 
    <Breadcrumbs /> 
    <Submenu data={this.props.submenu} /> // Props from Subheader 
</Subheader> 
    <Main sendSubmenu={function (data) { this.setState({subMenu: data}) } /> 
    <Footer /> 
</App>

這一切都可能是一個更容易一些。

編輯：要回答你的問題更全面，雖然，你可以在我上面列出的相同的方式發送一個組成部分，而當它在子菜單真實收到這樣做：

const List = this.props.data; 
return <List />;

這應該風格應謹慎使用。令人困惑的是全部組件來自哪裏。

來源

2017-07-14 10:38:19 tenor528

如何在不同的DOM元素呈現組件

回答

相關問題