如何阻止React卸載Semantic UI React中前一個選項卡的內容？

說我有這個在我的應用程序：如何阻止React卸載Semantic UI React中前一個選項卡的內容？

import React from 'react' 
import { Tab } from 'semantic-ui-react' 

const panes = [ 
    { menuItem: 'Tab 1', render:() => <Tab.Pane>Tab 1 Content</Tab.Pane> }, 
    { menuItem: 'Tab 2', render:() => <Tab.Pane>Tab 2 Content</Tab.Pane> }, 
    { menuItem: 'Tab 3', render:() => <Tab.Pane>Tab 3 Content</Tab.Pane> }, 
] 

const TabExampleBasic =() => (
    <Tab panes={panes} /> 
) 

export default TabExampleBasic

每當標籤切換，它正在從頭開始重新加載，我失去了一切，我從如果我回到它切換選項卡內的變化。

是什麼導致這種情況，以及我如何保持切換標籤的變化內容？

標籤文檔：https://react.semantic-ui.com/modules/tab#tab-example-basic

來源

2017-08-09 Adam Silver

什麼在丟失？你的窗格有本地狀態嗎？ – azium

@azium我的表單數據是使用react-redux創建的。沒有當地的州。 –

如果表單數據處於還原狀態，您將如何失去它？應該在切換標籤頁時從redux填寫表單字段，否？ – azium

狀態被丟失，因爲render函數被調用的Tab每個交換機上並可以產生新的對象。它最初是爲了執行任務而完成的。但是，如果您將使用Redux或類似軟件，則不會出現此問題。

0.72.0介紹renderActiveOnly道具，有使用示例：simple和shorthand。您可以將其設置爲false，並且所有選項卡都將被渲染。

來源

2017-08-09 08:01:15

謝謝，但我使用了redux-form，儘管如此，表單數據也丟失了。任何想法？ –

'0.72.0'發佈了，我已經更新了答案。現在你的情況有一個簡單的解決方案 –

如何阻止React卸載Semantic UI React中前一個選項卡的內容？

回答

相關問題