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的每个开关上调用Tab函数并且它生成新对象，因此状态丢失。它最初是为性能任务完成的。但是，如果您使用Redux或类似设备，则不会遇到此问题。

0.72.0介绍了renderActiveOnly道具，有一些使用示例：Facebook documentation和simple。您可以将其设置为false，并且将呈现所有标签。

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

1 个答案: