useRef、forwardRef、useImperativeHandle获取子组件数据

实例图片.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();

  return (
    

       {
          console.log(childRef.current.getData());
        }}
      >
        获取子组件数据
      
      
    
  );
};
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 (
    

      我是子组件数据:{json}
    
  );
};
// forwardRef这个组件能够将其接受的 ref 属性转发到其组件树下
export default React.forwardRef(Child);