从另一个组件更新组件状态的最简单方法是啥？可以说组件是兄弟姐妹吗？

Posted 2023-02-23

【中文标题】从另一个组件更新组件状态的最简单方法是啥？可以说组件是兄弟姐妹吗？

【英文标题】：What is the most simplest method of updating component's state from another component? Lets say components are siblings?从另一个组件更新组件状态的最简单方法是什么？可以说组件是兄弟姐妹吗？

【发布时间】：2021-08-07 07:24:21

【问题描述】：

我正在尝试在我的 Web 应用程序中创建交互功能。在一个组件中选择一个选项后，我想更新另一个组件的状态并触发重新渲染。我该怎么办。

【问题讨论】：

reactjs.org/docs/lifting-state-up.html

【参考方案1】：

您可以将两个组件放在另一个组件中，并在那里定义状态和 setState。现在将 setState 作为道具发送到第一个组件。当您选择一个选项时，使用您发送的 setState 设置状态。现在，如果第二个组件使用该状态作为道具，那么它将被重新渲染。

父组件

定义状态

FirstComponent 将 setState 作为 Prop

SecondComponent 将 state 作为 Prop

So, in your case, if the second component's state is defined in the parent, we can send its setState as prop to the first component and when a value is selected, change the state in the first component itself.它将更改父级中存在的状态，这将重新渲染第二个组件，因为该状态是第二个组件中的一个道具。

【讨论】：

所以基本上当我们有交互式组件时，我们应该创建一个父级并批量化父级的状态。设计有效率吗？

我在从事的项目中多次看到这种模式。不确定它是否具有设计效率，但它是一种简单且常用的方法。