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，也就是三个组件，说实话，我看的云里雾里的，而且我觉得有点太复杂，而且呢，好像有一些局限（其实就是我没看懂。。。嘲笑自己的智商）