reactjs - 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>