更新popup通用组件

src/common/closable-popup/index.js

-import React, { Component } from 'react'
+import React from 'react'
+import ReactDOM from 'react-dom'
 import './index.scss'
 import classnames from 'classnames'
-import propTypes from 'prop-types'
 
-class ClosablePopup extends Component {
-
-  state = {
-    visible: this.props.visible
+function ClosablePopup({
+                         title, content, className, closable = true, close = function () {
   }
+                       } = {}) {
 
-  close = () => {
-    const {close} = this.props
-    close ? close() : this.setState({visible: false})
+  function unmountComponent() {
+    ReactDOM.unmountComponentAtNode(div)
+    if (div && div.parentNode) {
+      div.parentNode.removeChild(div)
+    }
   }
 
-  componentDidUpdate(prevProps, prevState) {
-    const {visible} = this.props
-    if (prevState.visible !== this.props.visible) {
-      this.setState({
-        visible
+  function _close() {
+    let _c = close()
+    if (_c && _c.then) {
+      _c.then(() => {
+        unmountComponent()
       })
+    } else {
+      unmountComponent()
     }
   }
 
 
-  render() {
-    const {title, className, children, closable = true} = this.props
-    return (
-      this.state.visible
-        ?
-        <div className={'closable-popup-mask'}>
-          <div className={classnames(['popup-container', className])}>
-            <div className="title">{title}</div>
-            <div className="content">
-              {children}
-            </div>
-            {
-              closable && <i className={'close iconfont iconiconfront-2'} onClick={this.close}/>
-            }
-          </div>
+  const closablePopup = (
+    <div className={'closable-popup-mask'}>
+      <div className={classnames(['popup-container', className])}>
+        <div className="title">{title}</div>
+        <div className="content">
+          {content}
         </div>
-        : null
-    )
-  }
-}
+        {
+          closable && <i className={'close iconfont iconiconfront-2'} onClick={_close}/>
+        }
+      </div>
+    </div>
+  )
+  const div = document.createElement('div')
+  document.body.appendChild(div)
+
 
-ClosablePopup.propTypes = {
-  title: propTypes.string.isRequired,
-  visible: propTypes.bool,
-  closable: propTypes.string,
-  close: propTypes.func
+  ReactDOM.render(closablePopup, div)
 }
 
 export default ClosablePopup

src/components/blessingPreheat/live/index.js

@@ -16,8 +16,6 @@ class Live extends Component {
     tabs: [],
     lives: {},
     preheatLives: [],
-    visible: false,
-    qrcode: '',
     today: '',
     isApp: getParam('version')
   }
@@ -80,9 +78,9 @@ class Live extends Component {
         const {data} = res
         if (data.code == 200) {
           QRCode.toDataURL(data.data.url, (err, url) => {
-            this.setState({
-              qrcode: url,
-              visible: true
+            Popup({
+              title: '扫码关注“七月在线”服务号即可预约',
+              content: <img id={'live-qr-code'} src={url} alt=""/>
             })
           })
         } else {
@@ -92,14 +90,9 @@ class Live extends Component {
   }
 
   render() {
-    const {tabs, lives, visible, qrcode, preheatLives, today} = this.state
+    const {tabs, lives, preheatLives, today} = this.state
     return (
       <div id={'live'}>
-        <Popup title={'扫码关注“七月在线”服务号即可预约'}
-               visible={visible}
-        >
-          <img id={'live-qr-code'} src={qrcode} alt=""/>
-        </Popup>
         <div className="title">
           <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/title-decorate-left.png" alt=""/>
           <span>大咖直播</span>

src/components/blessingPreheat/live/index.scss

 #live {
     margin-top: 30px;
+
     .title {
         display: flex;
         justify-content: center;
@@ -175,22 +176,6 @@
 
     }
 
-    .popup-container {
-        .title {
-            color: #525C65;
-        }
-
-        .content {
-            display: flex;
-            justify-content: center;
-
-            img {
-                width: 120px;
-                height: 120px;
-            }
-        }
-    }
-
     .am-tabs {
         width: 330px;
         margin: 0 auto;
@@ -234,3 +219,20 @@
 
     }
 }
+
+.popup-container {
+    .title {
+        color: #525C65;
+    }
+
+    .content {
+        display: flex;
+        justify-content: center;
+
+        img {
+            width: 120px;
+            height: 120px;
+        }
+    }
+}
+