React 中，forwardRef 和 useImperativeHandle 配合实现父组件调用子组件方法和属性

React api 的用法简介：

     forwardRef： React 提供的一个特殊的 API，主要用于将 ref 属性从父组件 “转发”（forward）到子组件。在 React 中，ref 主要用于获取组件或 DOM 元素的引用，这样我们就可以在需要的时候访问和操作这些组件或元素。然而，由于 React 的 props 传递机制，我们无法直接将 ref 传递给子组件。这就是 forwardRef 的作用所在

      useImperativeHandle：减少暴露给父组件获取的DOM元素属性, 只暴露给父组件需要用到的DOM方法， 参数说明如下：

• 参数1: 父组件传递的ref属性

• 参数2: 返回一个对象, 以供给父组件中通过ref.current调用该对象中的方法

1、创建父组件，代码如下：

'use strict';
import React, { useRef } from 'react';
import { Button } from 'antd';

import TestModal from './modal';

const Test = props => {
  const testModalRef = useRef(null);
  const handleClick = () => {
    testModalRef.current.show();
  };
  return (
    

      
        弹出
      
      
    
  );
};

export default Test;

2、创建子组件，代码如下：

'use strict';
import React, { useState, forwardRef, useImperativeHandle } from 'react';
import { Modal, Button } from 'antd';

const TestModal = forwardRef((props, ref) => {
  const [visible, updateVisible] = useState(false);
  useImperativeHandle(ref, () => ({ show }));
  // 打开对话框
  const show = data => {
    updateVisible(true);
  };
  // 关闭对话框
  const handleClose = () => {
    updateVisible(false);
  };
  // 确定事件
  const handleSure = () => {
    console.log('handleSure');
  };

  return (
    
          
            取消
          
          
            确定
          
        

]} >

测试

); }); export default TestModal;

子组件通过 forwardRef 接收父组件的 ref，通过 useImperativeHandle 将自己的属性和方法和父组件的 ref 实现绑定，并暴露给父组件。

个人小结，不喜勿喷。谢谢。