父组件更新prop_如何在ReactJS中更新组件的prop —哦，是的，有可能

父组件更新prop

by Dheeraj DeeKay

通过Dheeraj DeeKay

如何在ReactJS中更新组件的prop —哦，是的，有可能 (How to update a component’s prop in ReactJS — oh yes, it’s possible)

If you have read the official React docs (and you should, as it is one great resource on React) you’d notice these lines:

如果您已经阅读了React的官方文档(并且应该阅读，因为它是React的重要资源)，您会注意到以下几行 ：

Whether you declare a component as a function or a class, it must never modify its own props.

无论您将组件声明为函数还是类 ，它都绝不能修改自己的道具。

React is pretty flexible but it has a single strict rule:

React非常灵活，但是它有一个严格的规则：

React is pretty flexible but it has a single strict rule:All React components must act like pure functions with respect to their props.

React非常灵活，但是它有一个严格的规则： 就其道具而言，所有React组件都必须像纯函数一样工作。

Props are never to be updated. We are to use them as is. Sounds rigid right? But React has its reasons behind this rule and I’m pretty convinced by their reasoning. The only caveat is, though, that there are situations where we might need to initiate the update of a prop. And we will soon know how.

道具永远不会更新。 我们将按原样使用它们。 听起来很僵硬吧？ 但是React有其背后的原因，我对他们的推理深信不疑。 不过，唯一的警告是，在某些情况下，我们可能需要启动道具的更新。 而且我们很快就会知道。

Consider the following line of code from a parent component:

考虑来自父组件的以下代码行：

<MyChild childName={this.state.parentName} />

<MyChild childName={this.state.parentName} />

This is a simple line which every React dev is probably familiar with. You are calling child component. While you are doing that, you are also passing the state of the parent (parentName) to the child. In the child component, this state will be accessed as this.props.childName. Fair enough.

这是每个React开发人员可能都熟悉的一条简单代码。 您正在调用子组件。 在执行此操作的同时，还将父级( parentName )的状态传递给子级。 在子组件中，此状态将作为this.props.childName.访问this.props.childName. 很公平。

Now if there is any change of name required, parentName will be changed in the parent and that change will automatically be communicated to the child as is the case with the React mechanism. This setup works in most of the scenarios.

现在，如果需要更改名称， parentName在父级中更改parentName ，并且该更改将自动传递给子级，就像React机制一样。 此设置适用于大多数情况。

But what if you need to update the prop of the child component, and the knowledge of the change required and the trigger to change it is only known to the child? Considering the ways of React, data can only flow from top-to-bottom i.e., from parent-to-child. So then how are we to communicate to the parent that a change to prop is required?

但是，如果您需要更新子组件的属性，并且只有子组件知道所需更改的知识和更改触发器，该怎么办？ 考虑到React的方式，数据只能从上到下流动，即从父子流动。 那么，我们该如何与家长沟通，要求改变道具？

Well, although this is anti-pattern and not recommended, the devs who wrote the language have us covered. Surprise!

好吧，尽管这是反模式，不建议这样做，但是编写该语言的开发人员已经涵盖了我们。 惊喜！

We can do it with Callbacks. I know, no surprise there! They seem to come in handy for every problem we face here. Okay, okay, now how?

我们可以通过回调来实现。 我知道，这并不奇怪！ 对于我们在这里遇到的每个问题，它们似乎都派上用场。 好的，好的，现在如何？

Imagine if the above call to the child was modified this way:

想象一下，对上述子项的调用是否通过以下方式进行了修改：

<MyChild childName={this.state.parentName} onNameChange={this.onChange} />

<MyChild childName={this.state.parentName} onNameChange={this.onChange} />

Now in addition to a prop childName our needy-child also has an event called onNameChange exposed. This is the way to resolve the issue. Our child has done its part. Now it’s the parent’s turn to do what is required. And it need not fret. All it needs to do is define a function onChange as

现在，除了道具childName之外，我们的有需要的孩子还拥有一个名为onNameChange的事件。 这是解决问题的方法。 我们的孩子已经尽了自己的本分。 现在轮到父母做所需的事情了。 而且它不需要烦恼。 它需要做的就是将一个函数onChange定义为

function onChange(newName) {   this.setState({ parentName: newName });}

That’s it. Now whenever and wherever in the child component we wish to update the parentName prop, all we have to do is call `this.props.onNameChange(' My New name') and voilà! You’ll have what you desire. That’s it. Done and dusted.

而已。 现在，无论何时何地，在子组件中，我们希望更新parentName ，我们要做的就是调用` this.props.onNameChange(' My New name')和！ 您将拥有自己想要的东西。 而已。 尘埃落定。

Hope that was easy to grasp. Let me know in the comments about any difficulties or different ways in which it could have been made easier. Thanks.

希望很容易掌握。 在评论中让我知道本来可以简化的任何困难或不同方式。 谢谢。

One last thing.

最后一件事。

React argues against this and they are pretty right about it. This is anti-pattern. So whenever you run into a situation like this, check to see if you could lift your state up or if there is any way you could break your component down. It might sound a wee bit tedious, but know that that’s the way it is supposed to be in React!

React对此表示反对，他们对此非常正确。 这是反模式。 因此，每当遇到这种情况时，请检查是否可以提升状态或是否有任何方法可以破坏组件。 这听起来可能有点乏味，但是要知道这就是应该在React中使用的方式！

Happy Coding.

编码愉快。

翻译自: https://www.freecodecamp.org/news/how-to-update-a-components-prop-in-react-js-oh-yes-it-s-possible-f9d26f1c4c6d/

父组件更新prop