javascript - react : Preserve local component state of tabbed content

Question

我正在使用 React 和 Redux。假设我有一个(非常简化的)选项卡式页面。每个选项卡都有表单元素和一堆数据，如下所示:

我将数据保留在 Redux 存储中，但我不想将表单元素状态保留在 Redux 存储中(例如是否选中复选框或文本框的值)，因为它们仅适用于它们的组成部分并且相当微不足道。相反，我会将该状态存储在其组件中(TabAContent、TabBContent 或 TabCContent)。

这是我用来呈现内容 Pane 的代码:

render() {
  var tab = null;
  if(this.props.selectedTab === 'a') {
    tab = <TabAContent />;
  }
  else if(this.props.selectedTab === 'b') {
    tab = <TabBContent />;
  }
  else if (this.props.selectedTab === 'c') {
    tab = <TabCContent />;
  }

  return tab;
}

现在，当我在选项卡 A 文本框中输入一些文本，然后单击选项卡 B，然后单击“返回”时，文本框值消失了。这是有道理的，因为当我单击选项卡 B 时该组件被破坏。但我希望该状态保持不变。

在非 react 中，我只需在 DOM 中显示所有三个选项卡内容 Pane ，并打开/关闭它们的可见性/显示:

<div class="content selected"></div>
<div class="content"></div> 
<div class="content"></div>

我假设在 React 中做类似的事情(渲染所有三个，但显示和隐藏它们)会让人皱眉:

hide the other two
<TabAContent show={"true"} />
<TabBContent />
<TabCContent />

另一种选择是一次只渲染一个，但以某种方式“实例化”所有三个组件并将其分配给一个变量，因此当重新选择其选项卡时，我们可以将其放回去(从而保留文本框和其他表单元素)。

关于解决这个问题的最佳方法有什么想法吗？我意识到这个可以通过将所有状态保持在redux中来解决，但在我的应用程序中，保持本地、简单的UI状态更有意义(比如如果一个复选框被选中)在本地组件状态以避免过度杀伤。

Answer 1

您对显示/隐藏标志的想法完全没问题。如果您想使用本地状态并保留它，正确的方法就是让您的组件保持事件状态。

这是有争议的事情，但我认为 Redux 不应该用于 ui 状态。它非常适合存储数据状态，但不是 ui。如果没有 ui 本身，ui 状态就毫无意义。想象一下 bool 值。它到底意味着什么？但如果这个 bool 值用在下拉菜单中，那就很明显了，对吧？