# 兄弟组件通信（提升状态）

URL: https://caijiao.org/react/chapter7/sibling-components
Source: docs/react/chapter7/sibling-components.md
Description: 兄弟组件通信是指在 React 中，两个组件之间的数据传递不是直接通过 props，而是通过父组件来传递。在 React 中，兄弟组件之间无法直接通信，必须通过将共享的状态提升到共同的父组件来实现通信。

## 什么是提升状态

在 React 中，兄弟组件间无法直接通过 props 进行通信，因此我们需要将共享的状态提升到它们的共同父组件。通过将状态提升到父组件，父组件可以将该状态通过 `props` 传递给子组件，进而实现兄弟组件间的数据传递。

## 示例：提升状态实现兄弟组件通信

假设我们有两个兄弟组件：`SiblingA` 和 `SiblingB`，它们需要共享一个状态。我们将这个状态提升到父组件 `Parent`。

```jsx
function Parent() {
  const [sharedState, setSharedState] = useState('');

  const handleChange = (newState) => {
    setSharedState(newState);
  };

  return (
    <div>
      <h1>共享状态: {sharedState}</h1>
      
      
    </div>
  );
}

function SiblingA({ onChange }) {
  return (
    <div>
      <input
        type="text"
        placeholder="输入状态"
        onChange={(e) => onChange(e.target.value)}
      />
    </div>
  );
}

function SiblingB({ sharedState }) {
  return (
    <div>
      <p>兄弟组件 B 的状态: {sharedState}</p>
    </div>
  );
}
````

在这个例子中：

1. 父组件 `Parent` 包含一个共享的状态 `sharedState` 和一个更新该状态的函数 `handleChange`。
2. 父组件通过 props 将 `handleChange` 传递给 `SiblingA`，当用户在 `SiblingA` 中输入内容时，`onChange` 会更新父组件的状态。
3. 父组件将 `sharedState` 传递给 `SiblingB`，`SiblingB` 会显示该状态。

通过这种方式，我们实现了兄弟组件间的通信，状态被提升到了共同的父组件中，兄弟组件通过父组件来共享和更新数据。

## 总结

提升状态是一种常用的 React 技巧，用于在兄弟组件之间共享状态。通过将状态提升到父组件，父组件可以将该状态通过 `props` 传递给各个子组件，从而实现组件之间的数据交互和通信。这种方式有助于确保组件之间的数据流向清晰，并且符合 React 的单向数据流原则。