react父级组件和子组件方法互相调用
1、父组件调用子组件：
（1）方法一：自定义属性+useImpretiveHandle
父组件：
//React是模块引入，useRef和useEffect 是具体引入
import React, { useRef, useEffect } from 'react';
import ChildComponent from './ChildComponent';
function ParentComponent() {
const childRef = useRef(null);
useEffect(() => {
if (childRef.current) {
childRef.current.childMethod();
}
}, []);
return (
//父组件引入子组件，并给子组件添加ref属性childRef,传参使用自定义属性myRef
<ChildComponent myRef={childRef} refresh={refreshTable}/>
);
}
子组件：
import {useImperativeHandle} from 'react';
function ChildComponent(props) {
//定义子组件方法
const childMethod = () => {
console.log('Child method called');
};
// 将方法暴露给父组件
useImperativeHandle(props.myRef, () => ({
childMethod
}));
props.refresh
return (
<div>Child Component</div>
);
}
（2）方法二：ref+forwardRef+useImpretiveHandle
父组件：
//React是模块引入，useRef和useEffect 是具体引入
import React, { useRef, useEffect } from 'react';
import ChildComponent from './ChildComponent';
function ParentComponent() {
const childRef = useRef(null);
useEffect(() => {
if (childRef.current) {
childRef.current.childMethod();
}
}, []);
return (
//父组件引入子组件，并给子组件添加ref属性childRef,传参使用ref,而不是自定义属性
<ChildComponent ref={childRef} />
);
}
子组件：
import {useImperativeHandle} from 'react';
//定义子组件方法，使用forwardRef进行转发，接收props和ref两个参数
Const ChildComponent =forwardRef((props,ref)=>{
// 将方法暴露给父组件，这里的ref就不再从props中读取，从forwarRef转发拿到
useImperativeHandle(ref, () => ({
childMethod
}));
//定义子组件方法
const childMethod = () => {
console.log('Child method called');
};
return (
<div>Child Component</div>
);
})
forwardRef的作用：forwardRef 是 React 提供的一个高阶函数，它可以让你在函数组件中访问子组件的 ref，并把该 ref 传递给子组件，forwardRef的回调函数接收两个参数：props和ref。其中，props是组件的属性对象，ref 是回调函数中定义的 ref 对象。
2、子组件调用父组件：
方法一：使用props
// 父组件
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';
function ParentComponent() {
const [message, setMessage] = useState('');
// 父组件的方法
const parentMethod = () => {
setMessage('父组件的方法被调用了！');
};
return (
<div>
<ChildComponent parentMethod={parentMethod} /> //将父组件的方法传递给子组件
<p>{message}</p>
</div>
);
}
// 子组件
function ChildComponent({ parentMethod }) { /这里的parentMethod相当于props的解构
return (
<button onClick={parentMethod}>调用父组件的方法</button>
);
}
//或者子组件可以写成：
function ChildComponent(props) { /这里的parentMethod相当于props的解构
return (
<button onClick={props.parentMethod}>调用父组件的方法</button>
);
}
export default ParentComponent;