newICSS/src/components/Banner/ModeChange/index.jsx

import React, { Component } from "react";
import style from "./index.less";
import ReactDom from "react-dom";
import close from '@images/icon_close.png';
import sopen from '@images/btn-open.png'
import sclose from '@images/btn-closed.png'

class ModeChange extends Component {


    render(){
        const {closeConfigModal, changeType, confirmType, mode,hideBtn} = this.props;
        const domNode = document.getElementById('root');
        const isOpen = mode==='1';
        return ReactDom.createPortal(<React.Fragment>
            <div className={style['modal']}>
              <div className={style['shade']} onClick={closeConfigModal}></div>
              <div className={style['content']}>
                <div className={style['close']}>设置<img src={close} onClick={closeConfigModal} /></div>
                <div className={style["oper"]}>
                    <p>
                      <span>开启模板智能推送：</span>
                      <a className={style['switch']} href="javascript:void(0)" onClick={()=>changeType(isOpen?'0':'1')}>
                        {hideBtn?<img src={isOpen?sclose:sopen} alt=""/>:''}
                        {isOpen?'关':'开'}
                        </a>
                    </p>
                </div>
                <div className={style["explain"]}>
                    <p>说明：</p>
                    <p>该设置只针对问诊模块中的“主诉”、“现病史”、“其他史”功能；</p>
                </div>
                {hideBtn?<div className={style['btn']} onClick={confirmType}><button>保存修改</button></div>:''}
            </div>
        </div>
      </React.Fragment>,domNode)
    }
}

export default ModeChange;