export default function App(){
  const [modal1Visible, setModal1Visible] = useState(false) 
  const [modal2Visible, setModal2Visible] = useState(false) 
  const [modal3Visible, setModal3Visible] = useState(false)

  return (
    <div>
      {/* other ui */}
      <Modal1 visible={modal1Visible} onClose={()=>setModal1Visible(false)}/>
      <Modal2 visible={modal2Visible} onClose={()=>setModal2Visible(false)}/> 
      <Modal3 visible={modal3Visible} onClose={()=>setModal3Visible(false)}/>
    </div>
  )
}

function useModal(){
  const [visible, setVisible] = useState(false)
  function open(){
    setVisible(true)
  }
  function close(){
    setVisible(false)
  }
  const ui = (
    <Modal visible={visible} onClose={setVisible(false)}/>
  )
  return [
    ui,
    open,
    close,
  ]
}
export default function App(){
  const [Modal1, openModal1, closeModal1] = useModal() 
  const [Modal2, openModal2, closeModal2] = useModal() 
  const [Modal3, openModal3, closeModal3] = useModal()

  return (
    <div>
      {/* other ui */}
      <Modal1 />
      <Modal2 /> 
      <Modal3 />
    </div>
  )
}

export default function App(){
  const [modalKey, setModalKey] = useState(0) 

  function open(key){
    setModalKey(key)
  }

  function close(){
    setModalKey(0)
  }


  return (
    <div>
      {/* other ui */}
      <Modal1 visible={modalKey === 1} onClose={close}/>
      <Modal2 visible={modalKey === 2} onClose={close}/> 
      <Modal3 visible={modalKey === 3} onClose={close}/>
    </div>
  )
}

modal.open(`
  <div>
    xxx
  </div>
`)
modal.close()

import {render} from "react-dom"
import App from "./App"

render(<App />, document.querySelectr("#app"))

import React from "react"
import { render, unmountComponentAtNode } from "react-dom"
import Modal from "./modal"
import Video from "./video"

class ModalControl {
  container = document.querySelector("#modal-container")

  open(el) {
    render(el, this.container)
  }

  // 播放视频
  play({ videoUrl, videoCover, userName, userIcon, videoDesc } = {}) {
    this.open(
      <Video
        videoUrl={videoUrl}
        videoCover={videoCover}
        userName={userName}
        userIcon={userIcon}
        videoDesc={videoDesc}
        onClose={this.close.bind(this)}
      />
    )
  }

  // 预约弹窗
  reserve(time) {
    this.open(
      <Modal
        btn="预约通知"
        onBtnClick={() => reserve()}
        onClose={this.close.bind(this)}
      >
        <p>活动开始时间</p>
        <p>{xxxx-xx-xx xx:xx}</p>
        <p>点击下方按钮预约活动通知</p>
      </Modal>
    )
  }

  noChance() {
    this.open(
      <div>
        <p>打卡天数不足</p>
      </div>
    )
  }

  emptyBox() {
    this.open(
      <div>
        <p>sorry！</p>
        <p>你打开了一个空盒子</p>
        <p>请明天再来～</p>
      </div>
    )
  }

  // 关闭弹窗
  close() {
    unmountComponentAtNode(this.container)
  }
}


export default new ModalControl()

import modal from "./modal"

// 播放视频
modal.play({
// xxx
})

// 关闭
modal.close()