react modal 的 简单实现 与 原理分析

在React项目中，由于所有的Component将会被render在body的一个div之中，并且往往是Component包Component，就像一个洋葱一样，一层包着一层，里层的很难触及比较外面的一层。

可是，在css中，position属性往往被外层的position所左右，height: 100% 往往被外层的height所左右。如何才能做出一个拥有半透明的黑色遮罩，罩住整个页面，从而实现modal的效果呢？

在react 中，modal 的思路就是制作一个<Modal></Modal> Component，但是把它render 到body 的下一层去，而不是跟其他Component 一样render 到Component 的最里层。

只有render在body的下一层，与现有的Component 组平起平坐，这样才完全脱离的样式局限，当我在<Modal></Modal> 设置样式的时候可以为所欲为。

在这里就要借助 react-dom 了。因为render方法是 react-dom 提供的；
下面将是我测试的代码。

import React, {Component, PropTypes} from 'react';import ReactDOM from 'react-dom';export default class Modal extends Component {    static defaultProps = {        open: false
    };
    componentWillReceiveProps(nextProps) {        if (nextProps.open && !this.props.open) { // 从无到有
            this.node = document.createElement('div'); // 创建 DOM
            this.node.className = 'ReactModal'; // 给上 ClassName
            document.getElementsByTagName('body')[0].appendChild(this.node) // 给 body 加上刚才的 带有 className 的 div
            // 这个时候创建了 render的目的地。
            const style = require('./style.scss'); // css 样式
            const {children, ...rest} = nextProps;            let modal = (                <div className={style.container}>
                    <div className={style.mask} {...rest}></div>
                    {nextProps.children}                </div>
            );            // 这个时候创建了 Modal 的虚拟 Dom
            let allClass = document.getElementsByClassName('ReactModal');
            ReactDOM.render(modal, allClass[allClass.length - 1]) // 之所以这么写，是因为能重复打开Modal，因为每一次打开Modal，都会建立一个div
            // 将 Modal 成功 render 到目的地
        }        if (this.props.open && !nextProps.open) { // 从有到无
            ReactDOM.unmountComponentAtNode(this.node) // 调用 react-dom unmountComponentAtNode方法，将Modal解除。
            // 或者可以写下面的方法，将整个创建的div删除，这样多次打开就不会有很多个div残留在body中，但是并不是很正规的做法。
            // document.getElementsByTagName('body')[0].removeChild(document.getElementsByClassName('ReactModal')[0])
        }
    }
    render() {        return null // 只要这个Component的方法，不要它的render，它的render将会render到内层。
    }
}

Paste_Image.png

选中处为刚添加的dom，它被正确的render到body下一层，与** #content **平起平坐，里面有内容，上面的div为多次打开关闭Modal之后残留的div。

作者：JasonFF
链接：https://www.jianshu.com/p/d9e7245d4f10