React tabs - 切换破坏组件，需要维护相同的组件

Question

我正在尝试使用 React 和 Material-UI 制作一个多选项卡的 SPA。我以这个演示的代码为例：https : //codesandbox.io/s/qlq1j47l2w

看来，如果我按照上述示例进行操作，每次在选项卡之间导航时，我最终都会返回带有选项卡内容的组件的新实例：

      <Tabs
        value={value}
        onChange={this.handleChange}
        indicatorColor="primary"
        textColor="primary"
        scrollable
        scrollButtons="auto"
      >
        <Tab label="Tab 1" />
        <Tab label="Tab 2" />
      </Tabs>
    </AppBar>
    {value === 0 && <Tab1Contents/>}
    {value === 1 && <Tab2Contents/>}

由于 Tab1Contents 是一个表单，我希望保留其内部状态，而不是加载组件的新实例，上面的代码似乎是这样做的。

让 React 仅使用组件的一个实例并“记住字段值”的最佳方法是什么？

编辑

我已经将 Redux 添加到示例中，但是在我切换离开的那一刻，与 Tab 中的表单对应的存储被破坏了。有没有其他方法可以在 React 中实现选项卡来隐藏选项卡内容，而不是在每次导航离开时销毁它们并从头开始重新创建它们？

Answer 1

我的问题的解决方案非常简单！如果您不想销毁组件（从 DOM 中删除它），您可以简单地隐藏它！

代替：

{value === 0 && <Tab1Contents/>}

用：

<div style={{ display: value === 0? 'block': 'none'}}>
    <Tab1Contents/>
</div>

Answer 2

前面已经提到过，您必须防止组件从 DOM 中删除。MUI5 TabPanel 最简单的解决方案实际上就是替换

{value === index && children}

和

{children}

这意味着你的 Tabpanel 看起来像这样：

import * as React from "react";


const TabPanel= ({ children, value, index, ...other }) => {

  return (
    <div
      role="tabpanel"
      hidden={value !== index}
      id={`tabpanel-${index}`}
      aria-labelledby={`tab-${index}`}
      {...other}
    >
      {children}
      {/* {value === index && children} // This was removed */}
    </div>
  );
};

export default TabPanel;

不需要额外的逻辑，因为隐藏的 prop 已经处理了可见性方面的问题。这样你的组件应该保持它们的状态！