【大前端】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/全局状态库。

相关推荐
lichong95114 分钟前
【大前端++】Android studio Log日志高对比度配色方案
android·java·前端·json·android studio·大前端·大前端++
没头脑的男大27 分钟前
如何把pdf转换的excell多个表格合并
java·前端·pdf
妄小闲28 分钟前
html网站模板 html网页设计模板源码网站
前端·html
Restart-AHTCM1 小时前
前端核心框架vue之(路由篇3/5)
前端·javascript·vue.js
段振轩1 小时前
Docker nginx容器部署前端项目。
前端·nginx·docker
让时光到此为止。2 小时前
vue的首屏优化是怎么做的
前端·javascript·vue.js
San302 小时前
JavaScript 流程控制与数组操作全解析:从条件判断到数据高效处理
javascript·面试·代码规范
Z_Wonderful2 小时前
同时使用ReactUse 、 ahooks与性能优化
react.js·性能优化·typescript
温宇飞2 小时前
CSS 中如何处理空白字符
前端
dengzhenyue2 小时前
矩形碰撞检测
开发语言·前端·javascript