直接用🌰就可以说明,所以看看代码就能明白
父组件
import React, { useRef } from 'react';
const Parent = props => {
const childMethodRef = useRef();
const handleChildFun = () => {
childMethodRef.current.childFun('test');
}
const fun2 = () => {
childMethodRef.current.fun2();
}
return (
<div >
我是父组件
<button onClick={() => handleChildFun()}>Click1</button>
<br/>
<button onClick={() => fun2()}>Click2</button>
<br/>
<Child
test={'ok'}
ref={childMethodRef}
/>
</div>
)
}
export default Parent;
子组件
import React, { useRef, forwardRef, useImperativeHandle } from 'react';
const Child = forwardRef(({test}, ref) => {
// 可以让父组件调用子组件的方法
useImperativeHandle(ref, () => ({
childFun (info) {
console.log(info)
},
fun2(){
console.log('fun2')
}
}));
return (
<div >
我是子组件
</div>
)
})
export default Child;