react hook之useRef, useImperativeHandle, forwardRef的使用方法

弹窗组件可以由此实现

父组件 ------ `pages/Test/index.tsx`

import { useRef } from 'react';
import RefCom from '@/components/RefCom'

const TestCom: React.FC = (props) => {
  const refCom = useRef<any>();
  
  return (
    <>
      <button onClick={()=>{refCom.current.changeLoading()}}>
        点击改变RefCom组件中的loading值
      </button>
      <RefCom ref={refCom}/>
    </>
  )
}

子组件 ------ `components/RefCom.tsx`

import { useState, forwardRef, useImperativeHandle } from 'react';

const RefCom = ({}, ref: any) => {
  // 在官方文档中深入JSX一栏中指出布尔类型、Null 以及 Undefined 将会忽略。
  const [loading, setLoading] = useState<string>('false');

  // 暴露组件的方法
  useImperativeHandle(ref, () => ({
    changeLoading: () => {
      setLoading('true');
    },
  }));

  return (
    <>
      <div>我是RefCom组件的loading值：{loading}</div>
    </>
  )

};

export default forwardRef(RefCom);