当前位置：首页 > React

react如何通信

2026-03-30 17:56:13React

React 组件通信方式

父组件向子组件传递数据
通过 props 传递数据，子组件通过 this.props（类组件）或直接解构（函数组件）接收。
示例：

// 父组件
<ChildComponent message="Hello from parent" />

// 子组件（函数组件）
function ChildComponent({ message }) {
  return <div>{message}</div>;
}

子组件向父组件传递数据
父组件通过 props 传递回调函数，子组件调用该函数并传参。
示例：

// 父组件
function handleData(data) {
  console.log(data);
}
<ChildComponent onData={handleData} />

// 子组件
<button onClick={() => props.onData("Child data")}>Send</button>

兄弟组件通信
通过提升状态到共同的父组件，或使用全局状态管理工具（如 Redux、Context API）。
示例（状态提升）：

// 父组件
const [sharedData, setSharedData] = useState("");
<ChildA onData={setSharedData} />
<ChildB data={sharedData} />

Context API 跨层级通信

创建 Context 并包裹组件树，子组件通过 useContext 或 Context.Consumer 访问数据。
示例：

const MyContext = React.createContext();

// 提供者
<MyContext.Provider value={{ data, setData }}>
  <ChildComponent />
</MyContext.Provider>

// 消费者（函数组件）
const { data, setData } = useContext(MyContext);

事件总线（Event Bus）

适用于非父子组件通信，通过自定义事件订阅和触发。
示例：

// 创建事件总线
const EventBus = { on: (event, cb) => {}, emit: (event, data) => {} };

// 组件A（订阅）
EventBus.on("event", (data) => {});

// 组件B（触发）
EventBus.emit("event", data);

状态管理库（Redux/Zustand）

适用于复杂应用，集中管理状态并通过 dispatch 或 hooks 通信。
Redux 示例：

// 定义 action 和 reducer
const increment = () => ({ type: "INCREMENT" });

// 组件中触发
dispatch(increment());

Refs 和回调函数

通过 ref 直接访问子组件实例或 DOM 元素。
示例：

react如何通信

// 父组件
const childRef = useRef();
<ChildComponent ref={childRef} />

// 子组件（需使用 forwardRef）
const ChildComponent = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({ method: () => {} }));
});