时间戳

首页 > 解决方案 > 阻止所有组件渲染

reactjs - 阻止所有组件渲染

问题描述

我有一个存储组件的变量，例如：

const list = {
   components: [<ComponentOne key={1}/>, <ComponentTwo key={2}/>]
}

只有客户选择的组件会被渲染，其他没有选择的组件应该待机，但不能被销毁，因为当客户选择另一个时，它应该出现但不能重新构建。

但是当我从 ComponentOne 切换到 ComponentTwo 然后又回到 ComponentOne 时，它​​被重建并且我失去了在 ComponentOne 中已经完成的一切

有没有一种方法，当创建的组件没有被渲染时，它不会丢失所有的状态？

标签： reactjs

解决方案

我可以看到两个选项来实现你想要的：

  1. 管理组件外部的状态
  2. 渲染所有组件，但只显示当前组件

1.管理组件外的状态

列表中的所有组件部分都是无状态的（没有定义 useState 或 this.state），并且它们的状态将在外部管理并作为道具传递。

这可以通过在父组件中或在反应上下文中的状态来完成。

const [ state, setState ] = useState()
const list = {
   components: [ComponentOne, ComponentTwo]
}
const CurrentComponent = list.components[index]

return <CurrentComponent state={state} setState={setState} />

2. 渲染所有组件，但只显示当前一个

这不是反应中最惯用的方法，但在大多数情况下应该可以工作。您的组件将具有一个 css 属性，display: none但当前显示的属性除外display: block（或者可见性：可见/隐藏）。

推荐阅读