react父组件如何调用子组件的方法
使用 ref 直接调用子组件方法
在父组件中通过 useRef 或 createRef 创建 ref，并将其传递给子组件。子组件需要使用 forwardRef 和 useImperativeHandle 暴露方法。
父组件示例：
import { useRef } from 'react';
import Child from './Child';
function Parent() {
const childRef = useRef(null);
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 传递回调函数
父组件可以通过 props 将回调函数传递给子组件，子组件在适当时机调用该回调。
父组件示例：
function Parent() {
const handleChildEvent = () => {
console.log('父组件处理子组件事件');
};
return <Child onEvent={handleChildEvent} />;
}子组件示例：
function Child({ onEvent }) {
const handleClick = () => {
onEvent();
};
return <button onClick={handleClick}>触发事件</button>;
}使用 Context API 进行通信
对于深层嵌套的组件，可以使用 Context API 实现跨层级方法调用。
创建上下文：
import { createContext, useContext } from 'react';
const ChildContext = createContext();
export function useChildMethods() {
return useContext(ChildContext);
}
export function ChildProvider({ children, methods }) {
return (
<ChildContext.Provider value={methods}>
{children}
</ChildContext.Provider>
);
}父组件使用：
function Parent() {
const childMethods = {
doSomething: () => console.log('执行子组件方法')
};
return (
<ChildProvider methods={childMethods}>
<Child />
</ChildProvider>
);
}子组件使用：
function Child() {
const { doSomething } = useChildMethods();
return <button onClick={doSomething}>执行方法</button>;
}使用自定义事件
通过自定义事件实现松耦合的组件通信，适用于非父子关系的组件。
事件总线实现：
const events = {};
const EventBus = {
on(event, callback) {
if (!events[event]) events[event] = [];
events[event].push(callback);
},
emit(event, data) {
if (events[event]) {
events[event].forEach(callback => callback(data));
}
}
};父组件触发事件：
function Parent() {
const handleClick = () => {
EventBus.emit('callChildMethod', { data: 'some data' });
};
return <button onClick={handleClick}>触发子组件方法</button>;
}子组件监听事件：
function Child() {
useEffect(() => {
EventBus.on('callChildMethod', (data) => {
console.log('接收到事件:', data);
});
return () => {
// 清理事件监听
};
}, []);
return <div>子组件</div>;
}
