react中的modal怎么用

蜗牛 互联网技术资讯 2022-04-22 33 0

这篇文章主要介绍了react中的modal怎么用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇react中的modal怎么用文章都会有所收获,下面我们一起来看看吧。

在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中统一维护

react中的modal怎么用  react 第1张
顺着这个思路, 对于 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中的modal怎么用”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“react中的modal怎么用”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注蜗牛博客行业资讯频道。

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:niceseo99@gmail.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

评论