代码拉取完成,页面将自动刷新
设计理念
该装饰器设计之初目的是为了抽离业务弹出层组件的编写逻辑。一般情况下开发者都希望业务弹出层能像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();
};
}
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。
1. 开源生态
2. 协作、人、软件
3. 评估模型