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

蒲厷渶之戀2024-01-19 12:35

React api 的用法简介：

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

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

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

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

javascript 复制代码

'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 (
    <div>
      <Button type="primary" onClick={handleClick}>
        弹出
      </Button>
      <TestModal ref={testModalRef} />
    </div>
  );
};

export default Test;

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

javascript 复制代码

'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 (
    <Modal
      title="弹框"
      width="50%"
      open={visible}
      maskClosable={false}
      onCancel={handleClose}
      footer={[
        <div className="dialog-footer" key="dialogFooter">
          <Button size="small" key="cancel" onClick={handleClose}>
            取消
          </Button>
          <Button size="small" key="submit" type="primary" onClick={handleSure}>
            确定
          </Button>
        </div>
      ]}
    >
      <div className="create-group-content">测试</div>
    </Modal>
  );
});

export default TestModal;

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

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