当前位置：首页 > React

react模型之间如何通信

2026-01-24 14:58:33React

组件间通信方法

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

// 父组件
<ChildComponent data={someData} />

// 子组件
function ChildComponent({ data }) {
  return <div>{data}</div>;
}

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

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

// 子组件
<button onClick={() => onData("Hello")}>Send</button>

跨层级通信

Context API
适用于跨多层级组件共享数据，避免逐层传递props。
示例：

const MyContext = React.createContext();

// 提供者
<MyContext.Provider value={sharedData}>
  <ChildComponent />
</MyContext.Provider>

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

状态管理库（Redux/MobX）
集中管理全局状态，通过store和actions实现通信。
Redux示例：

// 触发Action
dispatch({ type: 'ACTION_TYPE', payload: data });

// 订阅状态
const data = useSelector(state => state.data);

事件总线（Event Emitter）

通过第三方库（如events）实现任意组件间通信。
示例：

import EventEmitter from 'events';
const emitter = new EventEmitter();

// 组件A发送事件
emitter.emit('event', data);

// 组件B监听事件
emitter.on('event', data => console.log(data));

Refs与实例方法

父组件通过ref调用子组件方法。
示例：

// 子组件（类组件）
class Child extends React.Component {
  method() { /* ... */ }
}

// 父组件
const childRef = useRef();
<Child ref={childRef} />
<button onClick={() => childRef.current.method()} />