實例圖片.png

useRef
useRef 返回一個可變的 ref 對象，其 .current 屬性被初始化為傳入的參數(shù)（initialValue）。返回的 ref 對象在組件的整個生命周期內(nèi)保持不變。

useImperativeHandle
useImperativeHandle 可以讓你在使用 ref 時自定義暴露給父組件的實例值。

forwardRef
React.forwardRef 會創(chuàng)建一個React組件，這個組件能夠?qū)⑵浣邮艿膔ef 屬性轉(zhuǎn)發(fā)到其組件樹下的另一個組件中。

父組件代碼:

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());
        }}
      >
        獲取子組件數(shù)據(jù)
      </Button>
      <Child ref={childRef} />
    </div>
  );
};
export default GetChildDataPage;

子組件

import { useState } from "react";
import * as React from "react";
import "./index.less";

// React.forwardRef 接受渲染函數(shù)作為參數(shù)。React 將使用 props 和 ref 作為參數(shù)來調(diào)用此函數(shù)。此函數(shù)應(yīng)返回 React 節(jié)點(diǎn)。
const Child = (props: any, ref: any) => {
  const [json] = useState(
    '{"showGridLevelMgr": "1","gridLevelMgrRequired": "1","gridMap": "1"}'
  );

  // 暴露組件的方法 接受外部獲取的ref
  React.useImperativeHandle(ref, () => ({
    // 構(gòu)造ref的獲取數(shù)據(jù)方法
    getData: () => {
      return json;
    },
  }));

  return (
    <div
      style={{
        padding: 12,
        border: "1px solid black",
        width: 200,
        height: 200,
        marginTop: 20
      }}
    >
      我是子組件數(shù)據(jù):{json}
    </div>
  );
};
// forwardRef這個組件能夠?qū)⑵浣邮艿?ref 屬性轉(zhuǎn)發(fā)到其組件樹下
export default React.forwardRef(Child);