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、创建父组件,代码如下:

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 实现绑定,并暴露给父组件。

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

相关推荐
CodeSheep1 分钟前
当了leader才发现,大厂最想裁掉的,不是上班总迟到的,也不是下班搞失联的,而是经常把这3句话挂在嘴边的
前端·后端·程序员
吃饺子不吃馅5 分钟前
✨ 你知道吗?SVG 里藏了一个「任意门」——它就是 foreignObject! 🚪💫
前端·javascript·面试
IT_陈寒1 小时前
Python开发者必须掌握的12个高效数据处理技巧,用过都说香!
前端·人工智能·后端
gnip8 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
一只叫煤球的猫9 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel10 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼10 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手14 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法14 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku14 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css