当前位置：首页 > news >正文

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

news 2025/9/4 6:16:08

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

一、父子组件通信

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

// 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 中最常见的方式，数据单向流动。

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

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

// 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：借助共同父组件

// 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”。

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>;
}