react 子组件如何通信
子组件向父组件通信（子传父）
通过父组件向子组件传递回调函数，子组件调用该函数传递数据。
// 父组件
function Parent() {
const handleData = (data) => {
console.log(data); // 接收子组件数据
};
return <Child onData={handleData} />;
}
// 子组件
function Child({ onData }) {
const sendData = () => {
onData("子组件数据"); // 触发回调
};
return <button onClick={sendData}>发送数据</button>;
}父组件向子组件通信（父传子）
通过 props 直接传递数据或状态。
// 父组件
function Parent() {
const [count, setCount] = useState(0);
return <Child count={count} />; // 传递状态
}
// 子组件
function Child({ count }) {
return <div>{count}</div>; // 显示父组件数据
}兄弟组件通信
通过状态提升（Lifting State Up）到共同的父组件，再通过 props 传递。
// 父组件
function Parent() {
const [sharedData, setSharedData] = useState("");
return (
<>
<SiblingA onData={setSharedData} />
<SiblingB data={sharedData} />
</>
);
}
// 兄弟组件A（发送数据）
function SiblingA({ onData }) {
return <button onClick={() => onData("数据")}>发送</button>;
}
// 兄弟组件B（接收数据）
function SiblingB({ data }) {
return <div>{data}</div>;
}跨层级组件通信（Context API）
使用 React.createContext 实现深层嵌套组件间的数据传递。
const DataContext = React.createContext();
// 父组件（提供数据）
function Parent() {
return (
<DataContext.Provider value="全局数据">
<Child />
</DataContext.Provider>
);
}
// 子组件（消费数据）
function Child() {
const data = useContext(DataContext);
return <div>{data}</div>;
}事件总线（Event Bus）
通过自定义事件实现任意组件间通信（需谨慎使用，可能破坏 React 数据流）。
// 事件总线工具
const EventBus = {
listeners: {},
emit(event, data) {
if (this.listeners[event]) {
this.listeners[event].forEach(cb => cb(data));
}
},
on(event, callback) {
if (!this.listeners[event]) this.listeners[event] = [];
this.listeners[event].push(callback);
}
};
// 组件A（发布事件）
function ComponentA() {
const handleClick = () => {
EventBus.emit("message", "数据");
};
return <button onClick={handleClick}>发布</button>;
}
// 组件B（订阅事件）
function ComponentB() {
const [data, setData] = useState("");
useEffect(() => {
EventBus.on("message", setData);
}, []);
return <div>{data}</div>;
}状态管理工具（Redux/Zustand）
适用于复杂场景，集中管理全局状态。以 Zustand 为例：
import create from 'zustand';
// 创建 store
const useStore = create(set => ({
data: "",
setData: (newData) => set({ data: newData })
}));
// 组件A（更新状态）
function ComponentA() {
const setData = useStore(state => state.setData);
return <button onClick={() => setData("新数据")}>更新</button>;
}
// 组件B（读取状态）
function ComponentB() {
const data = useStore(state => state.data);
return <div>{data}</div>;
}
