阻止所有组件渲染

Question

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

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

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

但是当我从 ComponentOne 切换到 ComponentTwo 然后又回到 ComponentOne 时，它​​会被重建，并且我丢失了 ComponentOne 中已经完成的所有内容

有没有办法在创建的组件不渲染时，不丢失所有状态？

Answer 1

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

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

1。管理组件外的状态

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

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

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

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

2。渲染所有组件，但只显示当前组件

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