React.js：在组件之间共享状态

如果你喜欢我的文章，可以请我一杯咖啡或者分享给我:)

---

在本文中，我们将重点关注 react.js 中的组件之间共享状态。

---

国家是孤立的、私有的

首先，当我们在组件中创建状态时，我们必须了解这个状态的行为方式。 组件内创建的状态是组件的本地状态。那么这意味着什么呢？

如果渲染同一个组件两次，每个副本将具有完全隔离的状态。更改其中一个组件不会影响另一个组件。 也就是说，更新相同两个组件之一的状态不会影响另一个组件。

让我们用一个例子来解释一下。

同一个组件渲染两次并点击按钮，结果如下。

输出 :

如 gif 所示，每个副本都是完全隔离的，更改其中一个副本不会影响另一个副本。
如果您希望两个组件保持状态同步怎么办？在 React 中执行此操作的正确方法是从子组件中删除状态并将其添加到最接近的共享父组件中。

---

现在只需 3 个步骤，让我们保持两个组件的状态同步。 与 props 不同，state 完全特定于声明它的组件。 要同步两个组件的状态，应将共享状态提升到最近的公共父级，并作为 props.

传递给两个组件

第 1 步：从子组件中删除状态

让我们将 isActive 状态转移到 父组件，并将 isActive 添加到 Panel 的 prop 列表。现在，Panel 的父组件可以通过将 isActive 作为 prop 向下传递来控制它。相反，Panel 组件现在无法控制 isActive 的值，它现在取决于父组件。

---

第 2 步：setIsActive 属性

让我们将更新状态的函数作为 prop 发送给 子组件。

---

第三步：onClick事件

当按钮的onClick事件被触发时，setIsActive将运行并更新状态。

输出 :

---

提升状态通常会改变您存储为状态的内容的性质。因此，在本例中，它同时在两个面板中处于活动状态。 如果我们希望一次只有一个面板处于活动状态？这意味着 Accordion 公共 父组件 需要跟踪哪个面板是活动面板。它可以使用数字作为状态变量的活动面板的索引，而不是 布尔值 值：

const [activeIndex, setActiveIndex] = useState(0);

当 activeIndex 为 0 时，第一个面板处于活动状态，当其为 1 时，则为第二个面板。

单击任一面板中的“显示”按钮需要更改 Accordion 中的活动索引。面板无法直接设置 activeIndex 状态，因为它是在 Accordion 内部定义的。 Accordion 组件需要显式允许面板 组件 通过将事件处理程序作为 prop:
向下传递来更改其状态

 <Panel
    isActive={activeIndex === 0}
    onShow={() => setActiveIndex(0)}
  >
    ...
  </Panel>
  <Panel
    isActive={activeIndex === 1}
    onShow={() => setActiveIndex(1)}
  >
    ...
  </Panel>

输出 :

---

结论

组件内创建的状态对于组件来说是本地的。在本文中，我们研究了如何在组件之间共享状态。如果愿意的话，可以在评论中谈谈组件之间共享状态原则。

以上是React.js：在组件之间共享状态的详细内容。更多信息请关注PHP中文网其他相关文章！