如何防止 React 卸载 Semantic UI React 中上一个选项卡的内容？

Question

假设我的应用程序中有这个：

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

每当切换标签时，它都会从头开始重新加载，如果我 return 切换到它，我将丢失标签内的所有更改。

这是什么原因造成的，我如何才能保留切换后标签页的更改内容？

标签文档：https://react.semantic-ui.com/modules/tab#tab-example-basic

Answer 1

状态丢失，因为 render 函数在 Tab 的每个开关上被调用并产生新的对象。它最初是为执行任务而完成的。但是，如果你将使用 Redux 或类似的，你不会有这个问题。

0.72.0引入了renderActiveOnly道具，有使用示例：simple and shorthand。您可以将其设置为 false 并且将呈现所有选项卡。