【大前端】React 父子组件通信、子父通信、以及兄弟（同级）组件通信

在 React 中，组件之间的通信是核心问题之一。可以分为三类：父子组件通信 、子父通信 、以及兄弟（同级）组件通信。我给你梳理一下常见方式和对应示例：

一、父子组件通信

父组件通过 props 将数据或方法传递给子组件。

tsx 复制代码

// Parent.tsx
import React, { useState } from "react";
import Child from "./Child";

export default function Parent() {
  const [message, setMessage] = useState("Hello from Parent!");

  return <Child text={message} />;
}

// Child.tsx
import React from "react";

export default function Child({ text }: { text: string }) {
  return <h2>{text}</h2>;
}

👉 这是 React 中最常见的方式，数据单向流动。

二、子父组件通信（回调函数）

子组件通过调用父组件传递下来的 回调函数 来"通知"父组件。

tsx 复制代码

// Parent.tsx
import React, { useState } from "react";
import Child from "./Child";

export default function Parent() {
  const [msgFromChild, setMsgFromChild] = useState("");

  const handleChildMsg = (msg: string) => {
    setMsgFromChild(msg);
  };

  return (
    <div>
      <Child onSend={handleChildMsg} />
      <p>子组件发来的消息: {msgFromChild}</p>
    </div>
  );
}

// Child.tsx
import React from "react";

export default function Child({ onSend }: { onSend: (msg: string) => void }) {
  return (
    <button onClick={() => onSend("Hello Parent!")}>发送消息给父组件</button>
  );
}

三、同级组件通信（兄弟组件通信）

兄弟组件无法直接通信，需要通过共同的父组件 或 全局状态管理 来中转。

方式 1：借助共同父组件

tsx 复制代码

// Parent.tsx
import React, { useState } from "react";
import ChildA from "./ChildA";
import ChildB from "./ChildB";

export default function Parent() {
  const [msg, setMsg] = useState("");

  return (
    <div>
      <ChildA onSend={setMsg} />
      <ChildB message={msg} />
    </div>
  );
}

// ChildA.tsx
import React from "react";

export default function ChildA({ onSend }: { onSend: (msg: string) => void }) {
  return <button onClick={() => onSend("来自 A 的消息")}>发送给B</button>;
}

// ChildB.tsx
import React from "react";

export default function ChildB({ message }: { message: string }) {
  return <p>B 收到: {message}</p>;
}

方式 2：使用 Context（跨层级共享数据）

适合较复杂的场景，避免"层层传 props"。

tsx 复制代码

import React, { createContext, useContext, useState } from "react";

const MsgContext = createContext<any>(null);

export default function Parent() {
  const [msg, setMsg] = useState("");

  return (
    <MsgContext.Provider value={{ msg, setMsg }}>
      <ChildA />
      <ChildB />
    </MsgContext.Provider>
  );
}

function ChildA() {
  const { setMsg } = useContext(MsgContext);
  return <button onClick={() => setMsg("ChildA 发来消息")}>发消息</button>;
}

function ChildB() {
  const { msg } = useContext(MsgContext);
  return <p>B 收到: {msg}</p>;
}

方式 3：状态管理库（Redux、Zustand、Recoil）

适合大型项目，状态多、组件复杂时使用。

✅ 总结：

父子通信 ：props。
子父通信：回调函数。
同级通信：提升状态到父组件，或者用 Context/全局状态库。