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

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

相关推荐
智能化咨询10 分钟前
【Linux】【实战向】Linux 进程替换避坑指南:从理解 bash 阻塞等待,到亲手实现能执行 ls/cd 的 Shell
前端·chrome
Anson Jiang12 分钟前
浏览器标签页管理:使用chrome.tabs API实现新建、切换、抓取内容——Chrome插件开发从入门到精通系列教程06
开发语言·前端·javascript·chrome·ecmascript·chrome devtools·chrome插件
掘金安东尼16 分钟前
黑客劫持:周下载量超20+亿的NPM包被攻击
前端·javascript·面试
剑亦未配妥1 小时前
移动端触摸事件与鼠标事件的触发机制详解
前端·javascript
人工智能训练师7 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js
Seveny077 小时前
pnpm相对于npm,yarn的优势
前端·npm·node.js
yddddddy8 小时前
css的基本知识
前端·css
昔人'8 小时前
css `lh`单位
前端·css
前端君9 小时前
实现最大异步并发执行队列
javascript
Nan_Shu_61410 小时前
Web前端面试题(2)
前端