为了账号安全,请及时绑定邮箱和手机立即绑定

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

标签:
Html5


在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到内层。
    }
}

webp

Paste_Image.png

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



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


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消