• 技术文章 >web前端 >前端问答

    react中modal的用法是什么

    长期闲置长期闲置2022-04-22 11:02:38原创690

    在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的用法是什么的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:React
    上一篇:react是组件化开发吗 下一篇:react与vue的虚拟dom有什么区别
    20期PHP线上班

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• react sketch是什么• react native怎么删除组件• react和vue的路由有什么区别• react中受控组件是啥• react中的setstate是什么
    1/1

    PHP中文网