实例图片.png
useRef
useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（initialValue）。返回的 ref 对象在组件的整个生命周期内保持不变。
useImperativeHandle
useImperativeHandle 可以让你在使用 ref 时自定义暴露给父组件的实例值。
forwardRef
React.forwardRef 会创建一个React组件，这个组件能够将其接受的ref 属性转发到其组件树下的另一个组件中。
父组件代码:
import { useState, useEffect, useRef } from "react";
import * as React from "react";
import "./index.less";
import { Button } from "antd";
import Child from "./Child";
const GetChildDataPage = () => {
// 获取子组件实例的ref
const childRef = useRef<any>();
return (
<div className="get-child-data-page">
<Button
onClick={() => {
console.log(childRef.current.getData());
}}
>
获取子组件数据
</Button>
<Child ref={childRef} />
</div>
);
};
export default GetChildDataPage;
子组件
import { useState } from "react";
import * as React from "react";
import "./index.less";
// React.forwardRef 接受渲染函数作为参数。React 将使用 props 和 ref 作为参数来调用此函数。此函数应返回 React 节点。
const Child = (props: any, ref: any) => {
const [json] = useState(
'{"showGridLevelMgr": "1","gridLevelMgrRequired": "1","gridMap": "1"}'
);
// 暴露组件的方法 接受外部获取的ref
React.useImperativeHandle(ref, () => ({
// 构造ref的获取数据方法
getData: () => {
return json;
},
}));
return (
<div
style={{
padding: 12,
border: "1px solid black",
width: 200,
height: 200,
marginTop: 20
}}
>
我是子组件数据:{json}
</div>
);
};
// forwardRef这个组件能够将其接受的 ref 属性转发到其组件树下
export default React.forwardRef(Child);
