菜鸟教程
教程 react tutorial

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

什么是提升状态

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

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

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

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

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

  return (
    <div>
      <h1>共享状态: {sharedState}</h1>
      <SiblingA onChange={handleChange} />
      <SiblingB sharedState={sharedState} />
    </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 的单向数据流原则。

相关内容