ReactJs - 处理状态/道具的正确方法答案

【问题标题】：ReactJs - Correct way to handle state/propsReactJs - 处理状态/道具的正确方法
【发布时间】：2018-12-27 10:27:22
【问题描述】：

我有三个组件：

工作流程是这样的：主“New X”中的一个按钮调用 Modal，其中打开了 Form 组件。

在上面，我将表单输入保持为表单的状态（以便能够验证等）

现在，我需要一个新的工作流程：双击 Main 中的表应该会打开模式和表单，但在表单中输入了行数据（以便能够编辑数据）

为了尽可能多地重用代码，我想使用相同的模态/表单组件，但将行数据作为道具通过模态传递到组件中。

目前，行数据是 Main 的状态，作为 props 传递给 Modal，最后作为 props 传递给 Form，Form 将其设置为 state。

我的问题是：这是正确的处理方式吗？理论上，我可以让两个组件具有不同的数据状态。

【问题讨论】：

【解决方案1】：

是的，这似乎是正确的处理方式。 React 开发团队建议保留state lifted up as much as possible。

当然你可以用不同的方式来处理它，但你总是会尽可能地提升状态。

【讨论】：

【解决方案2】：

这是正确的处理方式吗？

是的。

理论上，我可以让两个组件具有不同的数据状态。

不，不是真的。表单是唯一管理状态的表单。

【讨论】：

感谢您的回答！我认为您的观点是 Form 是唯一管理它的人，但 App 也有状态？我的意思是，如果您更改 Form 的状态，则 App 的初始状态不会更改 => 状态中的不同数据 - 还是我遗漏了什么？
是的，我明白了。我将尝试重新表述：表格组件（应用程序内部）的更改设置了应用程序的状态 => 将状态作为道具发送到模态 => 将道具传递给表单并将初始化状态作为道具。这样我们在 App 和 Form 中都有状态 - 有意义吗？
@alex5207 好吧，但是这两种状态仍然代表两种不同的东西：App 存储所选单元格（及其初始内容），Form 存储当前更改