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