REACT 在组件之间共享状态

news2024/11/26 8:33:20

有时，您希望两个组件的状态始终一起变化。要做到这一点，请从他们俩身上删除状态，将其移动到他们最近的共同父级，然后通过道具将其传递给他们。这被称为提升状态，这是编写 React 代码时最常见的事情之一。

举例提升状态

在此示例中，父组件呈现两个单独的 s：AccordionPanel

Accordion
- Panel
- Panel

每个组件都有一个布尔状态，用于确定其内容是否可见。PanelisActive

按两个面板的显示按钮：

import { useState } from 'react';

function Panel({ title, children }) {
  const [isActive, setIsActive] = useState(false);
  return (
    <section className="panel">
      <h3>{title}</h3>
      {isActive ? (
        <p>{children}</p>
      ) : (
        <button onClick={() => setIsActive(true)}>
          Show
        </button>
      )}
    </section>
  );
}

export default function Accordion() {
  return (
    <>
      <h2>Almaty, Kazakhstan</h2>
      <Panel title="About">
        With a population of about 2 million, Almaty is Kazakhstan's largest city. From 1929 to 1997, it was its capital city.
      </Panel>
      <Panel title="Etymology">
        The name comes from <span lang="kk-KZ">алма</span>, the Kazakh word for "apple" and is often translated as "full of apples". In fact, the region surrounding Almaty is thought to be the ancestral home of the apple, and the wild <i lang="la">Malus sieversii</i> is considered a likely candidate for the ancestor of the modern domestic apple.
      </Panel>
    </>
  );
}

请注意，按下一个面板的按钮不会影响另一个面板，因为它们是独立的。

该图显示了一个由三个组件组成的树，一个父组件标记为 Accordion，两个子组件标记为 Panel。两个 Panel 组件都包含值为 false 的 isActive。

最初，每个的状态都是，所以它们看起来都折叠了PanelisActivefalse

与上一个图相同的图，突出显示了第一个子 Panel 组件的 isActive，表示单击时 isActive 值设置为 true。第二个 Panel 组件仍包含值 false。

单击任一按钮只会单独更新该状态PanelPanelisActive

但现在假设您要更改它，以便在任何给定时间仅展开一个面板。在这种设计下，展开第二个面板应该会折叠第一个面板。你会怎么做？

要协调这两个面板，您需要通过三个步骤将其状态“提升”到父组件：

从子组件中删除状态。
从公共父级传递硬编码数据。
将状态添加到公共父级，并将其与事件处理程序一起传递。

这将允许组件协调两个 s，并且一次只能展开一个。AccordionPanel

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

您将把的控制权交给其父组件。这意味着父组件将作为 prop 传递。首先从组件中删除以下行：PanelisActiveisActivePanelPanel

const [isActive, setIsActive] = useState(false);

取而代之的是，添加到道具列表中：isActivePanel

function Panel({ title, children, isActive }) {

现在，父组件可以通过将其作为 prop 传递来控制。相反，组件现在无法控制 - 现在由父组件决定！PanelisActivePanelisActive

步骤 2：从公共父级传递硬编码数据

若要提升状态，必须找到要协调的两个子组件中最接近的公共父组件：

Accordion （最接近的共同父级）
- Panel
- Panel

在此示例中，它是组件。由于它位于两个面板的上方，并且可以控制它们的道具，因此它将成为面板当前处于活动状态的“真相来源”。使组件将硬编码值（例如，）传递给两个面板：AccordionAccordionisActivetrue

import { useState } from 'react';

export default function Accordion() {
  return (
    <>
      <h2>Almaty, Kazakhstan</h2>
      <Panel title="About" isActive={true}>
        With a population of about 2 million, Almaty is Kazakhstan's largest city. From 1929 to 1997, it was its capital city.
      </Panel>
      <Panel title="Etymology" isActive={true}>
        The name comes from <span lang="kk-KZ">алма</span>, the Kazakh word for "apple" and is often translated as "full of apples". In fact, the region surrounding Almaty is thought to be the ancestral home of the apple, and the wild <i lang="la">Malus sieversii</i> is considered a likely candidate for the ancestor of the modern domestic apple.
      </Panel>
    </>
  );
}

function Panel({ title, children, isActive }) {
  return (
    <section className="panel">
      <h3>{title}</h3>
      {isActive ? (
        <p>{children}</p>
      ) : (
        <button onClick={() => setIsActive(true)}>
          Show
        </button>
      )}
    </section>
  );
}

尝试编辑组件中的硬编码值，并在屏幕上查看结果。isActiveAccordion

步骤 3：将状态添加到公共父级

提升状态通常会改变存储为状态的内容的性质。

在这种情况下，一次只能有一个面板处于活动状态。这意味着公共父组件需要跟踪哪个面板是活动面板。它可以不使用值，而是使用数字作为状态变量的活动索引：AccordionbooleanPanel

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

当是时，第一个面板处于活动状态，当它处于活动状态时，它是第二个面板。activeIndex01

单击其中的“显示”按钮需要更改中的活动索引。A 不能直接设置状态，因为它是在 .组件需要显式允许组件通过将事件处理程序作为 prop 向下传递来更改其状态：PanelAccordionPanelactiveIndexAccordionAccordionPanel

<>

<Panel

isActive={activeIndex === 0}

onShow={() => setActiveIndex(0)}

>

...

</Panel>

<Panel

isActive={activeIndex === 1}

onShow={() => setActiveIndex(1)}

>

...

</Panel>

</>

内部现在将使用道具作为其 click 事件处理程序：<button>PanelonShow

import { useState } from 'react';

export default function Accordion() {
  const [activeIndex, setActiveIndex] = useState(0);
  return (
    <>
      <h2>Almaty, Kazakhstan</h2>
      <Panel
        title="About"
        isActive={activeIndex === 0}
        onShow={() => setActiveIndex(0)}
      >
        With a population of about 2 million, Almaty is Kazakhstan's largest city. From 1929 to 1997, it was its capital city.
      </Panel>
      <Panel
        title="Etymology"
        isActive={activeIndex === 1}
        onShow={() => setActiveIndex(1)}
      >
        The name comes from <span lang="kk-KZ">алма</span>, the Kazakh word for "apple" and is often translated as "full of apples". In fact, the region surrounding Almaty is thought to be the ancestral home of the apple, and the wild <i lang="la">Malus sieversii</i> is considered a likely candidate for the ancestor of the modern domestic apple.
      </Panel>
    </>
  );
}

function Panel({
  title,
  children,
  isActive,
  onShow
}) {
  return (
    <section className="panel">
      <h3>{title}</h3>
      {isActive ? (
        <p>{children}</p>
      ) : (
        <button onClick={onShow}>
          Show
        </button>
      )}
    </section>
  );
}

这样就完成了提升状态！将状态移动到公共父组件中允许您协调两个面板。使用活动索引而不是两个“显示”标志可确保在给定时间只有一个面板处于活动状态。将事件处理程序传递给子级允许子级更改父级的状态。