在反应中从父dom节点中删除子组件

Posted 2023-03-05

【中文标题】在反应中从父dom节点中删除子组件

【英文标题】：Remove a child component from parent dom node in react

【发布时间】：2016-03-31 13:43:58

【问题描述】：

从装载组件的同一个 DOM 元素中卸载组件。

ReactDOM.render(<SampleComponent />, document.getElementById('container'));

然后我们将卸载它：

React.unmountComponentAtNode(document.getElementById('container'));

如果容器上附加了两个或两个以上的组件，如何将组件卸载并重新附加到父容器，例如

<div id="container">
   <SampleComponent1/>
   <SampleComponent2/>
</div>

我想根据来自SampleComponent2 的某些事件删除并重新附加SampleComponent2。

【问题讨论】：

React.renderComponent 已被弃用，他们现在正在使用React.render。您也不能在同一个容器上安装两个不同的组件。它只会替换之前渲染的组件。

@Road 在新版本中0.14.* 需要使用ReactDOM.render 而不是React.render

你需要存储状态并监听事件。使用 Flux 或 Redux 库。但是通量有一些问题。

【参考方案1】：

你应该让 React 根据你给它的 props 来处理组件 1 和 2。

例如，使用 ES6 和 React 0.14 纯组件：

const App = (has2) => 
  <div>
     <Component1 />
     has2 && <Component2 />
  </div>

如果has2 是真的，它将显示Component2。只需在 has2 更改时再次调用 render ，其余的由 React 完成。