从DOM中删除时维护reactjs元素状态

I'm building an website using ReactJS. I have a div in place, and its content is decided based on the state of a radio button (it changes the value of media):

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

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

Both the elements rendered inside card_container have a text field, and I'd like for their content not to be discarded when switching between states. For example, if in the text area inside MediaCard I type "foo", switch to TextCard and then back to MediaCard, then I lose the text I have entered in the text area.

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

How can I maintain the original MediaCard element and just re-render the original with the text and all of its props and state?

如何维护原始的MediaCard元素,只需使用文本及其所有道具和状态重新渲染原始元素?

EDIT: At the moment, I have solved this by bubbling up the properties of the contained elements, and then pass them as props when I re-render those elements. It's an ugly solution, though, and I'd rather find a better one...

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

1 个解决方案

#1

If you're switching between components at render-time, then react can't tell that the text field should be kept or not when re-rendering, so it recreates it along with the parent component. A solution to this problem would be to have a single Card component that behaves upon a type parameter, instead of two:

如果您在渲染时切换组件,那么在重新渲染时,react不能告诉文本字段应该保留,因此它会与父组件一起重新创建它。解决这个问题的方法是让一个Card组件在一个类型参数上运行,而不是两个:

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

this way react will be able detect that the text field can be preserved.

这种方式反应将能够检测到文本字段可以保留。

Edit. If your component hierarchy needs two separate components, you can render both, and have only one visible at a time:

编辑。如果组件层次结构需要两个单独的组件,则可以同时渲染两个组件,并且一次只能显示一个:

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

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

Each component will keep it's state, and you'll have only one present on the screen at a time

每个组件都会保持其状态,并且您一次只能在屏幕上显示一个组件

#1

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