react组件如何通信

React 组件通信方法

父组件向子组件传递数据
通过 props 传递数据，子组件通过 props 接收父组件的数据。这是 React 中最基础的通信方式。

// 父组件
function Parent() {
  const data = "Hello";
  return <Child message={data} />;
}

// 子组件
function Child(props) {
  return <div>{props.message}</div>;
}

子组件向父组件传递数据
父组件通过 props 传递回调函数给子组件，子组件调用该回调函数将数据传回父组件。

// 父组件
function Parent() {
  const handleData = (data) => {
    console.log(data);
  };
  return <Child onData={handleData} />;
}

// 子组件
function Child(props) {
  const sendData = () => {
    props.onData("Data from Child");
  };
  return <button onClick={sendData}>Send Data</button>;
}

兄弟组件通信
通过共同的父组件作为中介，子组件 A 通过父组件的回调函数传递数据，父组件再将数据通过 props 传递给子组件 B。

// 父组件
function Parent() {
  const [data, setData] = useState("");

  const handleData = (newData) => {
    setData(newData);
  };

  return (
    <>
      <ChildA onData={handleData} />
      <ChildB data={data} />
    </>
  );
}

// 子组件 A
function ChildA(props) {
  const sendData = () => {
    props.onData("Data from A");
  };
  return <button onClick={sendData}>Send Data</button>;
}

// 子组件 B
function ChildB(props) {
  return <div>{props.data}</div>;
}

使用 Context API
适用于跨层级组件通信，避免逐层传递 props。

// 创建 Context
const MyContext = React.createContext();

// 父组件提供数据
function Parent() {
  return (
    <MyContext.Provider value="Context Data">
      <Child />
    </MyContext.Provider>
  );
}

// 子组件消费数据
function Child() {
  const data = useContext(MyContext);
  return <div>{data}</div>;
}

使用状态管理库（如 Redux）
适用于全局状态管理，多个组件共享同一状态。

// Redux 示例
import { createStore } from "redux";
import { Provider, useSelector, useDispatch } from "react-redux";

// Reducer
const reducer = (state = { data: "" }, action) => {
  switch (action.type) {
    case "SET_DATA":
      return { ...state, data: action.payload };
    default:
      return state;
  }
};

// Store
const store = createStore(reducer);

// 父组件
function Parent() {
  return (
    <Provider store={store}>
      <ComponentA />
      <ComponentB />
    </Provider>
  );
}

// 组件 A
function ComponentA() {
  const dispatch = useDispatch();
  const sendData = () => {
    dispatch({ type: "SET_DATA", payload: "Redux Data" });
  };
  return <button onClick={sendData}>Send Data</button>;
}

// 组件 B
function ComponentB() {
  const data = useSelector((state) => state.data);
  return <div>{data}</div>;
}

使用事件总线（Event Emitter）
适用于非父子关系的组件通信，通过自定义事件传递数据。

// 创建事件总线
const EventEmitter = {
  events: {},
  on(event, callback) {
    this.events[event] = this.events[event] || [];
    this.events[event].push(callback);
  },
  emit(event, data) {
    if (this.events[event]) {
      this.events[event].forEach((callback) => callback(data));
    }
  },
};

// 组件 A
function ComponentA() {
  const sendData = () => {
    EventEmitter.emit("dataEvent", "Event Data");
  };
  return <button onClick={sendData}>Send Data</button>;
}

// 组件 B
function ComponentB() {
  const [data, setData] = useState("");

  useEffect(() => {
    EventEmitter.on("dataEvent", (newData) => {
      setData(newData);
    });
  }, []);

  return <div>{data}</div>;
}