React.js：组件间共享状态

# Web 开发# JavaScript# 编程# React

在本文中，我们将重点介绍 **react.js** 中的**组件间共享状态**。

国家是孤立和私有的

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

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

我们举个例子来解释一下。

Image description

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

**输出** ：

正如 gif 中所见，每个副本都是完全独立的，更改其中一个不会影响另一个。

**如果您希望两个组件保持其状态同步，该怎么办？在 React 中执行此操作的正确方法是从子组件中删除状态并将其添加到最近的共享父组件中。**

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

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

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

Image description

步骤 2：setIsActive 属性

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

Image description

步骤 3： onClick 事件

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

Image description

**输出** ：

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

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

当activeIndex为0时，第一个面板是活动的，当activeIndex为1时，第二个面板是活动的。

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

 setActiveIndex(0)}
  >
    ...
  
   setActiveIndex(1)}
  >
    ...

**输出** ：

结论

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