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