REACT 在组件之间共享状态，REACT组件间状态共享之道

摘要：REACT是一种流行的前端框架，允许开发人员创建可重用的组件来构建用户界面。在REACT中，组件之间的状态共享是一个重要的概念。为了实现状态共享，开发人员可以使用状态管理库，如Redux或MobX，来管理应用程序的状态并在组件之间共享。通过这种方式，组件可以相互通信并响应彼此的状态更改，从而提高应用程序的整体性能和用户体验。

有时，您希望两个组件的状态始终保持同步，为此，请将状态从这两个组件中移除，将其提升到它们最近的共同父组件中，然后通过道具将它们传递下去，这被称为状态提升，是React编程中常见的一个概念。

举例提升状态

在此示例中，有一个父组件和两个单独的子组件：Accordion和Panel，每个组件都有一个布尔状态，用于确定其内容是否可见，即PanelIsActive。

按两个面板的显示按钮：

import { useState } from 'react';
function Panel({ title, children }) {
  const [isActive, setIsActive] = useState(false);
  return (
    <h3>{title}</h3>
    {isActive ? (
      <p>{children}</p>
    ) : (
      // Show button click event handler will set the state to true for this panel
      // Note: This is just a placeholder, you would need to implement the button itself.
      setIsActive(true)}
      Show
    )}
  );
}
export default function Accordion() {
  return (
    // Other content here...
    // The state for both panels should be lifted up to this component.
  );
}

单击一个面板的按钮不会影响另一个面板，因为它们是独立的。

现在假设您想要改变这一点，以便在任何给定时间只能展开一个面板，在这种设计下，展开第二个面板应该会折叠第一个面板，要协调这两个面板，您需要通过三个步骤将其状态“提升”到父组件：

1、从子组件中删除状态。

2、从公共父级传递硬编码数据。

3、将状态添加到公共父级，并将其与事件处理程序一起传递。