javascript - 从 DOM 中删除元素时保持 reactjs 元素状态

Question

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

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

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

我怎样才能维护原始的 MediaCard 元素并重新渲染带有文本及其所有属性和状态的原始元素？

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

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>

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