父组件
1) ref必须传值, 否则childRef拿不到子组件的数据和方法
注意: 不一定使用app组件, 其他的任何父组件都可以
import "./App.css";
import React, { useEffect, useRef } from "react";
import RefToGetChild from "./components/RefToGetChild";
import _ from 'lodash';
const App: React.FC = () => {
const childRef = useRef<any>(null);
useEffect(() => {
console.log(_.get(childRef, 'current'));
}, [_.get(childRef, 'current')]);
return (
<div>
<RefToGetChild ref={childRef} message={"子组件: say hello"} />
<button onClick={() => {
const child = _.get(childRef, 'current');
const buttonDom = child.buttonRef.current
buttonDom?.click();
}}>父组件: trigger child button</button>
<button onClick={() => {
const child = _.get(childRef, 'current');
child?.onTest();
}}>父组件: 使用子组件的onTest方法</button>
<div>父组件: 子组件的data {JSON.stringify(_.get(childRef, 'current.data'))}</div>
</div>
);
};
export default App;
子组件
1) forwardRef作用: 封装组件, 直接将ref参数加在props后面(也可以不使用, 自己props定义一下ref需要传参, 父组件一样传ref就行)
2) useImperativeHandle作用和vue3的defineExpose一样, 存储需要暴露给父组件让其获取的数据和函数
import {
forwardRef,
useEffect,
useImperativeHandle,
useRef,
useState,
} from "react";
const RefToGetChild = forwardRef((props:{message:string;}, ref) => {
const [data, setData] = useState({});
const buttonRef = useRef(null);
useEffect(() => {
setTimeout(() => {
const obj = {
a: 1,
b: 2,
c: 3,
d: Array.from({ length: 10 }, (_, i) => ({ id: i })),
};
setData(obj);
}, 1000);
}, []);
const sayHello = () => {
console.log("hello");
};
const onTest = () => {
console.log('test')
}
useImperativeHandle(ref, () => ({
data,
buttonRef,
onTest,
}));
return (
<div>
<button ref={buttonRef} onClick={sayHello}>
{props.message}
</button>
</div>
);
});
export default RefToGetChild