莆田社交网站,邯郸网站建设邯郸网站制作,网站系统设计,建设银行对账网站父组件
1) ref必须传值, 否则childRef拿不到子组件的数据和方法
注意: 不一定使用app组件, 其他的任何父组件都可以
import ./App.css;
import React, { useEffect, useRef } from react;
import RefToGetChild from ./components/RefToGetCh…父组件
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 useRefany(null);useEffect(() {console.log(_.get(childRef, current));}, [_.get(childRef, current)]);return (divRefToGetChild ref{childRef} message{子组件: say hello} /button onClick{() {const child _.get(childRef, current);const buttonDom child.buttonRef.currentbuttonDom?.click();}}父组件: trigger child button/buttonbutton onClick{() {const child _.get(childRef, current);child?.onTest();}}父组件: 使用子组件的onTest方法/buttondiv父组件: 子组件的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 (divbutton ref{buttonRef} onClick{sayHello}{props.message}/button/div);
});export default RefToGetChild
