Question

我有以下结构：

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

在主要组件中，我构建了一个动态菜单，如此

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

作为子菜单，如何将其呈现给<Submenu /> DOM而不是构建菜单的<Main /> DOM？

Answer 1

在所有这些包装容器中（可能称为<App />）给<Main />一个名为sendSubmenu的函数道具。当您有子菜单信息时，调用该函数，然后<App />可以使用setState来保存它。然后，应用可以将状态值向下传递到<Subheader />和<Submenu />。

您可能应该将数据的呈现留给子菜单组件，然后只发送一个信息数组以在列表中呈现。

模糊的草图：

<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>

如果您使用像Redux这样的状态管理器，这一切都会更容易。

编辑：为了更全面地回答你的问题，你可以按照我上面概述的相同方式发送一个组件，当它在子菜单中收到它时会做类似的事情：

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

但是应该谨慎使用这种风格。令人困惑的是整个组件的来源。

如何在不同的dom元素上呈现组件

1 个答案: