React弹框、Toast、弹出页面等简单实现方案(百达通)

先说如何使用

Helper.modal('组件', 'z-index层级');

然后看一下代码

// modal 弹出一个独立的框
    modal(Component, zIndex) {
        let body = document.body;
        let showDom = document.createElement("div");
        // 设置基本属性
        showDom.style.position = 'absolute';
        showDom.style.top = '0px';
        showDom.style.left = '0px';
        showDom.style.width = Browser.width;
        showDom.style.height = Browser.height;
        showDom.style.zIndex = zIndex || Browser.FLOAT_VIEW_INDEX;
        body.appendChild(showDom);
        // 自我删除的方法
        let close = () => {
            ReactDom.unmountComponentAtNode(showDom);
            body.removeChild(showDom);
        }
        ReactDom.render(
            <Component onClose={close} />,
            showDom
        );
    }

我觉得几乎不可能写的再简洁了吧

我的思路很简单

首先你希望弹框是:通过一个函数调用,而不是通过控制某个组件的显示和隐藏来达到弹框的效果

其次:弹框要有自己关闭自己的能力,不是简单的隐藏,而是真正意义上的把自己移除

这样就具有了以上的特点,当然,我觉得这是权宜之计,通过React16,我觉得脸书能让React拥有动态插入组件的能力

PS:我之前看到过antd的实现方案,就为了一个Toast,写了三个组件,容器+通知->Toast,也就是三个组件,说实话,我看的云里雾里的,而且我觉得有点太复杂,而且呢,好像有一些局限(其实就是我没看懂。。。嘲笑自己的智商)

阅读更多
文章标签: ES6 React web开发 js
个人分类: 半教程
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭