开源软件名称:react-floatlayer
开源软件地址:https://gitee.com/library_file_dependency/react-floatlayer
开源软件介绍:
react-floatlayer- 基于异步
- 支持递归和调用
- 基于发布订阅模式
- promise形式的api
- 完全基于flux架构,可搭配redux、mobx等数据管理库使用
设计理念
该装饰器设计之初目的是为了抽离业务弹出层组件的编写逻辑。一般情况下开发者都希望业务弹出层能像window.alert 这样的方式调用,并且返回一个promise对象用于流程控制。之所以这样做,是为了规范化弹窗组件的定义方式,为弹窗组件提供统一的API。 withFloatLayer装饰器使用方法
该装饰器需要传入一个JSON对象,JSON的键名将作为调用的方法,键的值是要渲染的弹出层 import React from "react";import {message} from "antd";import withFloatLayer from "@yushicheng/react-floatlayer";import TestDialog from "@/TestDialog";@withFloatLayer({ //callTestDialog就是唤醒弹出层的方法 callTestDialog:TestDialog})class TestPage extends React.Component { render(){ return ( <button onClick={this.handleClick}>{"唤醒弹窗"}</button> )}; handleClick=async ()=>{ try{ // open方法会唤醒弹窗 await this.porps.$floatLayer.callTestDialog.open(); // 等待open方法后使用close方法关闭并销毁弹窗 this.porps.$floatLayer.callTestDialog.close() }catch(error){ // 捕获弹窗中reject方法抛出的异常 message.error(error.message) } };}export default TestPage; 我该如何定义弹出层?
接着上面的例子,刚刚我简化了TestDialog的定义过程,现在看看我们应该怎么定义这个弹窗组件; $promise的API介绍 名称 | 描述 |
---|
resolve | 控制异步流程成功的钩子函数 | reject | 控制异步流程失败的钩子函数 | close | 特殊封装,用于在内部关闭弹出层 |
import React from "react";import {Modal} from "antd";/* 这个组件不需要任何的装饰器,定义方法类似于react-router中<Route/>组件中的子组件 一旦这个组件放在了withFloatLayer装饰器中,在这个组件的props上就会多出一个$promise对象 用于控制异步流程*/export default class TestDialog extends React.Component { render(){ return ( <Modal visible={true} title="测试弹窗" onOk={this.handleResolve} onCancel={this.handleCancel} > <div>{"展示的内容"}</div> </Modal> )}; handleResolve=()=>{ //使用props上的promise接口 this.props.$promise.resolve(); }; handleCancel=()=>{ this.props.$promise.close(); };} |
请发表评论