javascript - 如何防止 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

每当切换选项卡时，它都会从头开始重新加载，并且如果我返回到它，我将丢失切换到的选项卡内的所有更改。

是什么导致了这种情况以及如何保持切换的选项卡的更改内容？

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

Answer 1

状态丢失是因为render函数在每个 switch 上被调用Tab并且它产生新的对象。它最初是为执行任务而完成的。但是，如果您将使用 Redux 或类似工具，则不会遇到此问题。

0.72.0介绍了renderActiveOnlyprop，有用法示例：simple和shorthand。您可以将其设置为false并且所有选项卡都将被呈现。