理解 React 中的 props 概念答案

【问题标题】：Understanding the props concept in React理解 React 中的 props 概念
【发布时间】：2020-10-26 13:12:17
【问题描述】：

在我学习 React 时，总是有人说你应该将你的状态保存在父组件中，并将它们作为 props 传递给它的子组件。

但在现实世界中，每当我开始构建 React 应用程序时，我最终都会将数据从子组件传递到其父组件。

例如，如果我必须在我的 react 应用程序中的某个地方实现一个表单，我会为它创建一个额外的组件（例如，FormComponent）并将其导入我的应用程序组件中。

但是现在，我必须将表单数据从FormComponent 传递给App 组件。也就是说，从子组件（FormComponent）到父组件（App 组件）。

这只是一个例子。 通常情况下，我总是不得不将数据从孩子传递给父母，而不是反过来。

我是否完全误解了传递道具的概念？如果我们继续上面的例子，是我的做法，对吗？

【问题讨论】：

这能回答你的问题吗？ What is the difference between state and props in React?
如果我正确理解了问题的上下文，我认为用户是在说他/她经常发现自己处于需要将数据从孩子传递给父母而不是另一种方式。因此，既然 react 是关于将数据从父母传递给孩子，而他/她需要另一种方式，那么他/她传递道具的概念是否可以？我说的对吗？
是的，纳菲兹。这正是我想问的。

【解决方案1】：

您不能像在 React 中那样将数据从子传递给父，The Data Flows Down。

所以通常你 pass callbacks 从父级到其子级，但状态仍保留在父级中。

这通常称为“自上而下”或“单向”数据流。任何状态始终归某个特定组件所有，从该状态派生的任何数据或 UI 只能影响树中“低于”它们的组件。

如果您遇到代码变得不可读、不可维护的情况，您应该考虑Lifting the State Up。

通常，多个组件需要反映相同的变化数据。我们建议将共享状态提升到最接近的共同祖先。

除此之外，一个常见的反模式是Prop Drilling、Context API 和许多状态库，如 Redux、MobX 和 Recoil，试图通过一些额外的功能来解决此类问题。

【讨论】：

【解决方案2】：

1- 在您的情况下，您可以通过从父级到子级的道具传递一个函数 ( 示例：handleSubmit() )。所以当这个函数被调用时，孩子的数据将从父母那里收集。您可以使用this doc 页面来激发您的代码。

2- 否则，您可以使用 react redux，然后您可以使用一个名为 redux store 的全局状态来处理项目中任何组件中的所有数据。
想了解更多关于 react redux 点击here.

3-祝你有美好的一天^_^。

【讨论】：