从 DOM 中移除时保持 reactjs 元素状态

Question

我正在使用 ReactJS 构建网站。我有一个 div，它的内容是根据单选按钮的状态决定的（它改变了媒体的值）：

<div className="card_container">
     { this.state.media=="image" ? <MediaCard /> : <TextCard /> }
</div>

在 card_container 中呈现的两个元素都有一个文本字段，我希望它们的内容在状态切换时不会被丢弃。例如，如果我在 MediaCard 内的文本区域中键入 "foo"，切换到 TextCard，然后再返回到 MediaCard，那么我会丢失在文本区域中输入的文本。

如何维护原始的 MediaCard 元素并仅使用文本及其所有道具和状态重新渲染原始元素？

编辑： 目前，我通过冒泡包含元素的属性解决了这个问题，然后在我重新渲染这些元素时将它们作为道具传递。不过，这是一个丑陋的解决方案，我宁愿找到一个更好的解决方案...

Answer 1

如果您在渲染时在组件之间切换，那么 react 无法判断在重新渲染时是否应保留文本字段，因此它会与父组件一起重新创建它.这个问题的解决方案是使用一个 Card 组件来处理 type 参数，而不是两个：

<div className="card_container">
     {<Card type={this.state.media} />}
</div>

这样react将能够检测到可以保留文本字段。

编辑。如果您的组件层次结构需要两个单独的组件，您可以同时渲染这两个组件，并且一次只显示一个：

var hasMedia = this.state.media == "image";

<div className="card_container">
    <MediaCard  visible={hasMedia}/>
    <TextCard  visible={!hasMedia}/>
</div>

每个组件都将保持其状态，您一次只能在屏幕上显示一个组件

从 DOM 中移除时保持 reactjs 元素状态

Maintaining reactjs element state when removing it from the DOM

html

javascript

reactjs