站长家园(原代码之家)(www.adminjie.com)网站源码,微信源码,游戏源码,商业源码分享平台。
当前位置:网站首页 技术文章 网络编程 正文

react中modal的用法是什么

时间:2022-04-23 [网络编程]作者:fabuyuan 浏览:7 次

react中,modal用于覆盖包含根视图的原生视图,可以实现遮罩的效果,语法为“<Modal visible={this.state.visible} {...props}></Modal>”或者“Modal.confirm()”。

本教程操作环境:Windows10系统、react17.0.1版、Dell G3电脑。

react中modal的用法是什么

Modal 简述

模态对话框。需要用户处理事务,又不希望跳转页面以致打断工作流程时,可以使用 Modal 在当前页面正中打开一个浮层,承载相应的操作。

另外当需要一个简洁的确认框询问用户时,可以使用 Modal.confirm() 等语法糖方法。

核心功能点提取

根据 Antd Modal 文档提供的接口来实现 Modal.

核心实现

Modal 组件的特殊在于它有两种用法:

  1. 通常用法:<Modal visible={this.state.visible} {...props}></Modal>
  2. 调用静态方法: Modal.confirm({ title: '取消后,已编辑的脚本信息将不会保存,请确认是否取消。', okText: '确认取消', cancelText: '暂不取消', onOk() { me.props.onCancel(); } })

我的想法是这两种调用都在internalModal.tsx中统一维护


顺着这个思路, 对于 Modal.tsx
1)不会维护 render 方法, 而是在 componentDidMount / componentDidUpdate 生命周期中调用 internalModal.tsx 完成渲染
2)Modal.tsx 中维护相关静态方法 confirm, error, info 等。

// Modal.tsxexport default class Modal extends React.Component<ModalProps, {}> {
    static propTypes = {
		...
    };

    static confirm(content) {
        const modal = new InternalModal();
        const props = {
            ...Modal.defaultProps,
            title: '提示',
            children: content,
            cancelButton: true,
            okButton: true,
            okButtonText: '确定',
            cancelButtonText: '取消',
            closable: false,
            visible: true,
            onOk() {
                modal.destroy();
            },
            onCancel() {
                modal.destroy();
            }
        };
        modal.render(props);
    }

    private modal;
    constructor(props: ModalProps) {
        super(props);
        this.modal = new InternalModal();
    }

    componentWillUnmount() {
        this.modal.destory();
        this.modal = null;
    }

    componentDidMount() {
        this.modal.render(this.props);
    }

    componentDidUpdate() {
        this.modal.render(this.props);
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.visible) {
            this.modal.show();
        } else {
            this.modal.hide();
        }
    }

    render() {
        return null;
    }}

接下来就是最关键的 internalModal.tsx :

export default class InternalModal {

    private props;

    render(props) {
        const {...} = this.props;

        this.createContainer();
        const icon = require('../../assets/icon/info.svg') as string;

        const modalDOM = ...;

        ReactDOM.render({modalDOM}, modalContainer,
	        () => {
	            if (visible) {
	                this.show();
	            }
	        });
    }

	...

    createContainer() {
        if (!modalContainer) {
            modalContainer = document.createElement('p');
            document.body.appendChild(modalContainer);
        }
    }

    destroy() {
        if (modalContainer) {
            ReactDOM.unmountComponentAtNode(modalContainer);
        }
    }

    show() {
        if (modalContainer) {
            modalContainer.style.display = 'block';
        }
    }

    hide() {
        if (modalContainer) {
            modalContainer.style.display = 'none';
        }
    }}

从代码可以发现 internalModal 的实现要点:

  1. 作为一个普通 js 类 (并没有继承 React.Component) ,提供一个 render 方法,render 中通过ReactDOM.render(element, container[, callback])渲染弹出窗口

  2. 在 document 上创建一个 p container 乘放 Modal,通过 css display 控制显示/隐藏,其实也可以使用 React Portal.

  3. 可以用一些第三方库比如react-transition-group 来增强 Modal 显示/隐藏的动画效果。

推荐学习:《react视频教程

以上就是react中modal的用法是什么的详细内容,更多请关注站长家园其它相关文章!

本文标签:  React

转载请注明来源:react中modal的用法是什么

本文永久链接地址:https://www.adminjie.com/post/11532.html

免责声明:
本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。

附:
二○○二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!

版权声明:
一、本站致力于为软件爱好者提供国内外软件开发技术和软件共享,着力为用户提供优资资源。
二、本站提供的部分源码下载文件为网络共享资源,请于下载后的24小时内删除。如需体验更多乐趣,还请支持正版。
三、我站提供用户下载的所有内容均转自互联网。如有内容侵犯您的版权或其他利益的,若有侵犯你的权益请:提交版权证明文件到邮箱 2225329873#qq.com(#换为@) 站长会进行审查之后,情况属实的会在三个工作日内为您删除。

  • 站长家园(原代码之家)会员升级
  • 最新文章
    • oracle横表怎么转纵表

      oracle横表怎么转纵表

      在oracle中,可以利用pivot()函数将横表转为纵表,该函数用于将行转为列,语法为“SELECT*FROM(数据查询集)PIVOT(SUM(行转列后...

    • oracle怎么去掉换行符

      oracle怎么去掉换行符

      方法:1、用replace,语法“replace(replace(列名,CHR(10),\'\'),chr(13),\'\')”;2、用translate,语法...

    • jquery是什么的一个类库

      jquery是什么的一个类库

      jquery是JavaScript封装的一个类库。jQuery是为了简化JS的开发或者DOM等操作而开发的一种类库;它封装了JS常用的功能代码(函数),提供一种...

    • oracle怎么删除session

      oracle怎么删除session

      删除session的方法:1、利用“v$session”视图,查看会话的sid和“serial#”;2、利用alter语句删除session即可,语法为“alt...

    • oracle怎么关闭em

      oracle怎么关闭em

      方法:1、用“emctlstatusdbconsole”查看em状态;2、用“emctlstopdbconsole”使em停止运行;3、用“emca-...

    热门文章