React 模態(tài)框解耦處理方法

再寫React模態(tài)框的時(shí)候發(fā)現(xiàn)不能想Vue 一樣能用 .sync修飾符處理模態(tài)框

然后查閱了以下解耦方式發(fā)現(xiàn)一個(gè)跟Vue.extend( )方法類似的API替废，然后看了以下使用方法如下

在這之前巧勤，我們先要了解一個(gè)API

createPortal ---> 他的前世是 ReactDOM.unstable_renderSubtreeIntoContainer

自己可以查閱以下資料下面直接上兩端自己封裝后的代碼顶考，后面有空傳gitHub

/*
 * @Description: 查看圖片--組件
 * @FilePath: \zslh_bet\src\views\publicTemplate\selectIMG\SelectIMG.js
 * @auto: LiaoXiang
 * @Date: 2020-03-02 10:22:56
 * @LastEditTime: 2020-03-07 10:22:18
 */
import React, { Component } from 'react'
import './selectImg.scss'
import {createPortal} from 'react-dom';

class SelectIMG extends Component {
    constructor(props) {
        super(props);
        this.state = {
            node: document.createElement('div')
        };
        this.node = document.createElement('div')
        
    }
    render() {
        return (
            <div className="selectImg" onClick={ this.lookForIMG.bind(this) }>
                <img 
                    src={this.props.imgurl} 
                    onError={ (e)=>{ e.target.src = require('../../../assets/icon/error_Load.png') }} 
                    alt=""
                />
                {
                    createPortal(
                        <div className="showModelImg" onClick={ this.removeModelIMG.bind(this) }>
                            <img 
                                src={this.props.imgurl} 
                                onError={ (e)=>{ e.target.src = require('../../../assets/icon/error_Load.png') }} 
                                alt=""
                            />
                        </div>,
                        this.node
                    )
                }
            </div>
        )
    }
    lookForIMG(){
        window.document.body.appendChild(this.node);
    }
    removeModelIMG(e){
        e.stopPropagation();
        window.document.body.removeChild(this.node);
    }
}

export default SelectIMG;

scss

.selectImg{
    height: 202px;
    width: 228px;
    display: inline-block;
    margin-right: 10px;
    overflow: hidden;
    img{
        pointer-events:none;
        height: 100%;
    }
}
.showModelImg{
    position: fixed;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,.6);
    z-index: 199;
    img{
        width: 100%;
        height: auto;
        margin-top: 35%
    }
}

一個(gè)自定義的彈框赡矢，只有彈框部分其他全是考slot 來處理自己的邏輯

圖片自己自取 就一個(gè)X的圖片

import React, { Component } from 'react'
import { createPortal } from 'react-dom'
import './myModel.scss'

class SModel extends Component {
    constructor(props) {
        super(props);
        this.node = document.createElement('div');
        this.node.classList.add('LX_MODEL_DOM_HIDLE')
        this.state = {

        };
    }
    render() {
        let view = Array.isArray(this.props.children) ? this.props.children : [this.props.children];
        return createPortal(
            <div className="myModel" onClick={this.clearModel.bind(this)}>
                <div className="smodelContent" onClick={(e) => { e.stopPropagation() }}>
                    <div className="headInfo">
                        <p>幫助說明</p>
                        <img
                            className="closeImg"
                            src={require('../../../assets/com/close.png')}
                            onClick={this.clearModel.bind(this)}
                            alt=""
                        />
                    </div>
                    <div className="SmodelCt">
                        {view.map(item => item)}
                    </div>
                </div>
            </div>, //塞進(jìn)傳送門的JSX
            this.node //傳送門的另一端DOM node
        );
    }
    clearModel(e) {
        window.document.body.removeChild(this.node);
    }
    componentDidMount() {
        this.props.visibel && window.document.body.appendChild(this.node);
    }
    componentDidUpdate() {
        // window.document.body.appendChild(this.node);
        if (this.props.visibel) {
            window.document.body.appendChild(this.node);
        } else {
            document.querySelector('.LX_MODEL_DOM_HIDLE') && window.document.body.removeChild(this.node);
        }
    }
}

export default SModel

.smodel{
    position: fixed;
    height: 100%;
    width: 100%;
    background: rgba(0,0,0,0.6);
    z-index: 199;
    .smodelContent{
        width: 600px;
        position: absolute;
        top: 420px;left: 50%;
        transform: translateX(-50%);
        border-radius: 8px;
        background: #ffffff;
        overflow: hidden;
        .headInfo{
            text-align: center;
            line-height: 92px;
            font-size:32px;
            background: #EF2646;
            color: #ffffff;
            .closeImg{
                height: 28px;
                width: 28px;
                position: absolute;
                right: 24px;
                top:30px;
            }
        }
        .SmodelCt{
            padding: 20px 10px;
            height: 300px;
        }
    }
}