开源软件名称：

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();      };}