Question

考虑app的这种结构：

<App>
  <SideBar/>
  <ProductsInterface/>
</App>

ProductsInterface 呈现名为 ProductList 的组件。我有另一个名为 Filter 的组件，它的props依赖于 ProductList 。这意味着我必须在里面渲染它。问题是我需要它在左侧，右侧边栏下，而不是 ProductsInterface 组件中对齐。我试图用css向左移动它，但我认为有一些方法，如 ReactDOM.render （表示div不是附加的有效元素），我可以在组件或html下附加Filter元素。

Answer 1

不是我推荐它，但您可以使用ReactDOM.createPortal在dom中的任何位置渲染组件：

<App>
  <SideBar/>
  <div id="filters"></div>
  <ProductsInterface/>
</App>

Filters.js

...
render () {
    return ReactDOM.createPortal( <div>...</div>, document.getElementById('filters'))
}

createPortal的第一个参数是要渲染的JSX，第二个参数是要渲染它的DOM元素。但是，我建议你使用CSS将它放在侧边栏下面。

Answer 2

更好的方法是使用像redux这样的状态管理器。因此，您可以在任何组件中获取状态的任何部分，而无需将它们嵌套到彼此中。或者context api可以帮助您在组件之间共享一些状态。

Answer 3

如果您愿意重构应用程序的组件结构，可以为<Filter />和<ProductList/>创建一个共同的祖先，它将状态作为道具传递给两个组件。所以不要这样：

<App>
    <SideBar/>
    <ProductsInterface>
        <ProductList>
            <Filter/>
        </ProductList>
    </ProductsInterface>
</App>

你会有这样的事情：

<App>
    <ProductInfo> //product-related state lives here
        <Sidebar/>
        <Filter/>
        <ProductsInterface>
            <ProductList/>
        </ProductsInterface>
    </ProductInfo>
</App>

这允许您将过滤器放在侧边栏的底部，因为组件是兄弟姐妹。然后，<Filter/>可以接收来自filterProducts()（其直接父级）的道具<ProductInfo/>等函数。这看起来像ProductInfo.js的渲染方法中的以下内容：

<Filter propName="this.filterProducts"></Filter>

然后在onClicks中设置<Filter/>以从其道具中调用该函数，这将在<ProductInfo/>中更新状态，并通过扩展名更新<ProductList/>的内容（从它接收<ProductInfo/>状态为道具）。

此模式称为lifting state up，在React应用程序中相当常见。在制定组织组件树的策略时，我肯定会建议进一步研究它。

在React中追加组件

3 个答案: