表单的条件渲染使它们共享相同的状态答案

【问题标题】：Conditional rendering of the forms make them share same state表单的条件渲染使它们共享相同的状态
【发布时间】：2018-10-09 05:53:17
【问题描述】：

我试图根据 EDIT/VIEW 模式有条件地渲染一些表单，并注意到它们共享相同的状态！询问只是为了了解发生了什么，有没有办法摆脱这种情况。我知道一种方法是；在 Form 组件内部进行编辑和查看模式，并将 editMode 的标志作为道具传递，但对这种情况特别感兴趣。对每种形式都使用ref 进行了相同的尝试，并且发生了同样的事情。我已经为我正在谈论的案例添加了jsfiddle！

指南：顶部的输入显示了同时显示且不涉及条件渲染的情况。底部的输入有一个按钮，可以在查看/编辑模式之间切换，并根据模式呈现适当的输入。在每种模式下键入它们会使它们共享状态（或者可能在两种情况下都呈现相同的输入）

Conditional form rendering JSFIDDLE

【问题讨论】：

您有条件地创建相同的元素，创建 2 个单独的元素。使用组合来保存重复代码。也许命名 NameFormEdit 和 NameFormView 等
很奇怪，因为 props 被正确传递了！从角度来看，这就像指令没有孤立范围的情况！
React 是基于一个虚拟 DOM，这个虚拟 DOM 是用来创建真实 DOM 的。在您的示例中，在这两种情况下，虚拟 DOM 都将是相同的，唯一的区别是道具，但重新渲染会更改道具，但不会重新生成新的 DOM 节点是完全有效的。如果您希望状态隔离，您可以创建 2 个实例并仅更改可见性，或者创建 2 个不同的元素类型，这将使虚拟 DOM 比较知道它们是不同的元素。但是最好的解决方案是首先不要将状态存储在组件中，例如。使用 Redux 等。
感谢您的帮助。实际上正在考虑关键道具，似乎下面的那个人已经回答了它并且它确实完成了这项工作。关于实例，这就是我一直在寻找的。如何制作不同的实例！尝试使用 HOC，没有成功。至于 redux，我认为它为非常简单的操作增加了太多的同谋（在其他情况下使用 mobx）。这是表单的内部状态，所以我认为在这里使用状态是可以的。

标签： reactjs forms conditional share state

【解决方案1】：

如果要重新渲染输入，可以为 NameForm 添加 key 属性，然后点击“切换模式”后，React 会重新渲染 NameForm 组件。

  <div className="row">
  {
    isEditMode
    ? <div className="col">
    <NameForm name="View mode from" key="1"/>
  </div>
  :  <div className="col">
    <NameForm name="Edit mode from" key="2"/>
  </div>
  }
  </div>

【讨论】：

想了想，你已经回答了。如果有其他方法，将等待标记为答案！