参考链接:React Hook 中useImperativeHandle介绍使用与场景 - 网页3剑客
子组件:
import React, {forwardRef, useImperativeHandle} from 'react';
function SonTwoDemo(props, ref) {
const sonFunc = () => {
console.log('我是儿子中的方法')
}
// 作用: 减少父组件获取的DOM元素属性,只暴露给父组件需要用到的DOM方法
// 参数1: 父组件传递的ref属性
// 参数2: 返回一个对象,父组件通过ref.current调用对象中方法
useImperativeHandle(ref, () => {
return {sonFunc}
})
return (
<>
<p>子组件</p>
</>
);
}
export default forwardRef(SonTwoDemo);
父组件:
import React, {useRef} from 'react';
import SonTwoDemo from "./SonTwoDemo";
function FatherTwoDemo() {
const headerRef = useRef(null);
const getSonMethod = () => {
headerRef.current.sonFunc();
}
return (
<>
<p>父组件2</p>
<SonTwoDemo ref={headerRef}/>
<button onClick={getSonMethod}>获取子组件的方法</button>
</>
);
}
export default FatherTwoDemo;