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

相关推荐
大猫会长6 小时前
react用useImages读取图片,方便backgroundImage
开发语言·前端·javascript
pepedd8646 小时前
突破 JS 单线程限制:Web Worker 实战指南
前端·javascript
加个鸡腿儿6 小时前
异步函数中return与catch的错误处理
前端·javascript
黑狼传说7 小时前
深入探索V8引擎的编译机制:从JavaScript到机器码的完整之旅
前端·javascript·v8
kyle~7 小时前
计算机网络---CA证书体系(Certificate Authority)
前端·数据库·计算机网络
{⌐■_■}7 小时前
【JavaScript】读取商品页面中的结构化数据(JSON-LD),在不改动服务端情况下,实现一对一跳转
开发语言·javascript·json
前端fighter7 小时前
深入解析CSS定位:Sticky与Fixed的异同与实战应用
前端·css·面试
本就是菜鸟何必心太浮7 小时前
python中`__annotations__` 和 `inspect` 模块区别??
java·前端·python