时间戳

首页 > 解决方案 > 在 React 中添加组件

reactjs - 在 React 中添加组件

问题描述

考虑这个应用程序的结构：

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

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

标签： reactjs

解决方案

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

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

过滤器.js

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

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

推荐阅读