react如何实现父子方法调用
父组件调用子组件方法
通过 useRef 和 forwardRef 结合暴露子组件方法。在子组件中使用 useImperativeHandle 定义可被父组件调用的方法。
父组件示例代码：
import { useRef } from 'react';
import Child from './Child';
function Parent() {
const childRef = useRef();
const handleClick = () => {
childRef.current.childMethod();
};
return (
<div>
<button onClick={handleClick}>调用子组件方法</button>
<Child ref={childRef} />
</div>
);
}子组件示例代码：
import { forwardRef, useImperativeHandle } from 'react';
const Child = forwardRef((props, ref) => {
useImperativeHandle(ref, () => ({
childMethod: () => {
console.log('子组件方法被调用');
}
}));
return <div>子组件</div>;
});子组件调用父组件方法
通过 props 将父组件的方法传递给子组件，子组件直接调用接收到的函数属性。
父组件示例代码：
function Parent() {
const parentMethod = () => {
console.log('父组件方法被调用');
};
return <Child onCallParent={parentMethod} />;
}子组件示例代码：
function Child({ onCallParent }) {
return (
<button onClick={onCallParent}>
调用父组件方法
</button>
);
}使用 Context 跨层级调用
对于深层嵌套组件，可以使用 React Context 传递方法。
创建 Context：
const MethodContext = createContext();
function App() {
const sharedMethod = () => {
console.log('共享方法被调用');
};
return (
<MethodContext.Provider value={sharedMethod}>
<Parent />
</MethodContext.Provider>
);
}子组件调用：
function DeepChild() {
const contextMethod = useContext(MethodContext);
return (
<button onClick={contextMethod}>
调用上下文方法
</button>
);
}事件总线模式
通过自定义事件系统实现任意组件间通信，适合复杂场景。
创建事件总线：
const EventBus = {
listeners: {},
emit(event, ...args) {
this.listeners[event]?.forEach(cb => cb(...args));
},
on(event, callback) {
if (!this.listeners[event]) this.listeners[event] = [];
this.listeners[event].push(callback);
}
};父组件监听：
useEffect(() => {
EventBus.on('childEvent', (data) => {
console.log('收到子组件事件', data);
});
}, []);子组件触发：
const triggerEvent = () => {
EventBus.emit('childEvent', { value: 123 });
};
