Javascript 从DOM中删除reactjs元素时保持其状态

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

{this.state.media==“image”？：}

在card_容器中呈现的两个元素都有一个文本字段，我希望在状态之间切换时不要丢弃它们的内容。例如，如果我在MediaCard内的文本区域键入“foo”，切换到TextCard，然后返回MediaCard，则我将丢失在文本区域中输入的文本

如何维护原始MediaCard元素，并使用文本及其所有道具和状态重新呈现原始内容

---

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

如果在渲染时在组件之间切换，那么

react

无法判断在重新渲染时是否应该保留文本字段，因此它会将其与父组件一起重新创建。解决此问题的方法是使用一个

卡
组件，该组件根据
类型
参数而不是两个：

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

每个组件都将保持其状态，并且一次屏幕上只显示一个组件
只是一个想法：也许可以尝试在componentWillUnmount（）中克隆对象以捕获其属性？我没有尝试过，但即使尝试添加对该元素的引用（例如，如果在MediaCard的父级上添加：this.state.MC=然后渲染this.state.MC，它仍然会创建一个全新的元素，我会将状态冒泡到父级。但是，如果这看起来“丑陋”对你来说，为什么不使用CSS隐藏/显示处于活动状态的
卡呢？这样它就不会被破坏。我使用两张卡，因为它们的外观和行为完全不同。即使我将媒体的值作为属性传递，我仍然需要基于媒体呈现两个不同的react元素，这种情况将重复本身…这是有道理的，我怀疑这就是为什么您有两个组件的原因；不幸的是，这会影响react在重新呈现组件时所做的优化，因为每次呈现父组件时，它都会创建一个全新的MediaCard/TextCard。您可以尝试将文本作为属性传递给卡组件，并使用cARD在卸载时会从父级调用委托方法，但这有点难看，会增加组件之间的紧密耦合。@Loruize:我更新了答案并添加了另一个可能的解决方案感谢@Cristik！我也在考虑做同样的事情。我得到另一个建议，使用Flux并将数据模型传递给组件你的解决方案虽然更优雅，但更适合我，因为我必须在这些组件中显示图像，我不希望它们每次都重新加载。
<div className="card_container">
     {<Card type={this.state.media} />}
</div>

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

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