React：保留选项卡式内容的本地组件状态

Question

我使用React和Redux。让我们说我有一个（非常简化的）标签页。每个选项卡都有表单元素和一组数据，如下所示：

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

这是我用来呈现内容窗格的代码：

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时，组件被破坏了。但我希望这种状态能够坚持下去。

在没有反应的情况下，我会在DOM中拥有所有三个标签内容窗格，并在其可见性/显示屏上打开/关闭它们：

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

我假设在React中做类似的事情（渲染所有三个，但显示和隐藏它们）会不满意：

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

另一种选择是一次只渲染一个，但要使所有三个组件都被实例化＃34;以某种方式并分配给变量，所以当重新选择其制表符时，我们可以将其重新插入（从而保留文本框和其他表单元素的状态）。

关于最佳解决方法的任何想法？我意识到通过在redux中保持所有状态可以解决这个 ，但在我的应用中，保持本地简单的UI状态（如果是一个复选框）更有意义在本地组件状态下检查）以避免过度杀伤。

Answer 1

你对show / hide标志的想法非常好。如果您想使用本地状态并保留它，正确的方法就是保持组件的正常运行。

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