從DOM中刪除元素時保持reactjs元素狀態

Question

我正在使用ReactJS建立一個網站。 我有一個div，其內容取決於單選按鈕的狀態（它會更改media的值）：

<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>

每個組件都會保持其狀態，並且一次只能在屏幕上顯示一個組件