api和封装,让Modal组件使用更加便捷

简介: api和封装,让Modal组件使用更加便捷

api和封装,让Modal组件使用更加便捷


最近有个页面,用到多个Modal,于是好几对[isVisible, setIsVisible] = useState(false);,以及确定、取消事件。

嫌麻烦~,仔细查下官网

简单的 Modal,可以使用 api

简单的 modal,直接使用api 调用,最最方便的!

Modal.info({
  title: 'This is a notification message',
  content: (
    <div>
      <p>some messages...some messages...</p>
    </div>
  ),
  onOk() {},
});
  • Modal.info
  • Modal.success
  • Modal.error
  • Modal.warning
  • Modal.confirm

复杂些的 Modal,封装成组件

复杂些,封装到一个组件里,逻辑自洽。

使用的时候xxRef.current.open()

封装也很简单:

import { useImperativeHandle, useState, forwardRef } from 'react';
import { Modal } from 'antd';
const ModalCreate = forwardRef((props, ref) => {
  const [isVisible, setIsVisible] = useState(false);
  const close = () => {
    setIsVisible(false);
  };
  // 只暴露想暴露的方法
  useImperativeHandle(ref, () => ({
    open: () => {
      setIsVisible(true);
    },
    close,
  }));
  return (
    <Modal title="Basic Modal" open={isVisible} onOk={close}>
      内容
    </Modal>
  );
});
export default ModalCreate;

使用的时候

import ModalCreate from '...';
const modalCreateRef = useRef();
modalCreateRef.current.open();
<ModalCreate ref={modalCreateRef} />;

注意事项

  • <Modal /> 默认关闭后状态不会自动清空, 如果希望每次打开都是新内容,请设置destroyOnClose`。
  • <Modal />Form 一起配合使用时,设置 destroyOnClose 也不会在 Modal 关闭时销毁表单字段数据,需要设置 <Form preserve={false} />
  • Modal.method() RTL 模式仅支持 hooks 用法。
目录
相关文章
|
6月前
|
数据采集 Java API
深度解析:爬虫技术获取淘宝商品详情并封装为API的全流程应用
本文探讨了如何利用爬虫技术获取淘宝商品详情并封装为API。首先介绍了爬虫的核心原理与工具,包括Python的Requests、BeautifulSoup和Scrapy等库。接着通过实战案例展示了如何分析淘宝商品页面结构、编写爬虫代码以及突破反爬虫策略。随后讲解了如何使用Flask框架将数据封装为API,并部署到服务器供外部访问。最后强调了在开发过程中需遵守法律与道德规范,确保数据使用的合法性和正当性。
|
4月前
|
人工智能 API 定位技术
MCP 开发实战:手把手教你封装高德地图与 arXiv API
本教程为 MCP(Model Context Protocol)开发实战第二阶段,带你从零封装第三方 API 为 AI 模型可用工具。通过高德地图地理编码与 arXiv 论文检索两个实例,涵盖项目搭建、工具声明、资源定义、错误处理等核心内容,助你快速上手 MCP 开发并集成至 Claude 使用。
|
7月前
|
数据采集 安全 大数据
Dataphin 5.1:API数据源及管道组件升级,适配多样化认证的API
为提升API数据交互安全性,Dataphin 5.1推出两种新认证方式:基于OAuth 2.0的动态授权与请求签名认证。前者通过短期Access Token确保安全,后者对关键参数加密签名保障数据完整性。功能支持API数据源OAuth 2.0认证和自定义签名配置,未来还将拓展更灵活的认证方式以满足多样化需求。
218 14
|
缓存 测试技术 API
API的封装步骤流程
API封装流程是一个系统化的过程,旨在将内部功能转化为可复用的接口供外部调用。流程包括明确需求、设计接口、选择技术和工具、编写代码、测试、文档编写及部署维护。具体步骤为确定业务功能、数据来源;设计URL、请求方式、参数及响应格式;选择开发语言、框架和数据库技术;实现数据连接、业务逻辑、错误处理;进行功能、性能测试;编写详细文档;部署并持续维护。通过这些步骤,确保API稳定可靠,提高性能。
|
JavaScript 前端开发 IDE
[译] 用 Typescript + Composition API 重构 Vue 3 组件
[译] 用 Typescript + Composition API 重构 Vue 3 组件
[译] 用 Typescript + Composition API 重构 Vue 3 组件
|
前端开发 JavaScript API
探究 React Hooks:如何利用全新 API 优化组件逻辑复用与状态管理
本文深入探讨React Hooks的使用方法,通过全新API优化组件逻辑复用和状态管理,提升开发效率和代码可维护性。
ThinkPHP 通用的API格式封装
本文介绍了在ThinkPHP框架中如何统一封装API返回格式的方法,包括创建状态码枚举类、编写统一格式化函数以及在BaseController和Error控制器中重写`__call`方法来处理不存在的方法或控制器调用,以实现统一的错误处理和返回格式。
ThinkPHP 通用的API格式封装
|
JavaScript 前端开发 API
探索Vue.js 3的组合式API:一种更灵活的组件状态管理方式
【10月更文挑战第5天】探索Vue.js 3的组合式API:一种更灵活的组件状态管理方式
|
JSON JavaScript API
(API接口系列)商品详情数据封装接口json数据格式分析
在成长的路上,我们都是同行者。这篇关于商品详情API接口的文章,希望能帮助到您。期待与您继续分享更多API接口的知识,请记得关注Anzexi58哦!
|
前端开发 JavaScript API
React 组件 API
10月更文挑战第9天
111 0