定义
官网文档
forwardRef : 转发 ref
useImperativeHandle : 用于自定义暴露给父组件的实例值
版本
"react": "^17.0.2"
"@types/react": "^17.0.44"
代码
父组件
import { FC, useEffect, useRef } from 'react';
import ChildComponent, { IRef } from './ChildComponent';
let MyConponent: FC = function () {
let testRef = useRef<IRef>(null);
useEffect(() => {
console.log(testRef);
testRef.current?.MyTestFn();
});
return (
<>
<ChildComponent ref={testRef} />
</>
);
};
export default MyConponent;
子组件
import { useMemoizedFn } from 'ahooks';
import { forwardRef, memo, useImperativeHandle } from 'react';
export interface IRef {
MyTestFn: () => void;
}
export interface IProps {
myName?: string;
}
let ChildComponent = forwardRef<IRef, IProps>((props, forwardedRef) => {
let test = useMemoizedFn(() => {
alert('我是子组件');
});
useImperativeHandle(
forwardedRef,
() => ({
MyTestFn: test,
}),
[test],
);
return <p>子组件 {props.myName}</p>;
});
ChildComponent.defaultProps = {
myName: '小明',
};
export default memo(ChildComponent);