react怎么做弹框

react做弹框的方法：

弹窗设计

将整个弹窗拆分为一个UI组件(Dialog)，一个处理函数部分(Staticize)

Dialog

Props

• title：弹窗标题

• message：内容信息

• onConfirm: 确认时调用的函数，

• onCancel：点击关闭或取消时，调用的函数

import React from 'react'
import cx from 'classnames'
import SVGIcon from 'components/SVGIcon'
import styles from './Dialog.scss'
const Dialog = ({
  title,
  message,
  onConfirm,
  onCancel,
}) => (
  <div className={styles.root}>
    <div className={styles.header}>
      <SVGIcon
        className={styles.icon}
        name="dialog/warning"
        width="32"
        height="32"
      />
      <div className={styles.title}>{title}</div>
    </div>
    <div className={styles.message}>{message}</div>
    <div className={styles.buttons}>
        <button className={styles.button} onClick={onCancel}>
           取消
        </button>
      <button className={cx(styles.button, styles.active)} onClick={onConfirm}>
        确定
      </button>
    </div>
  </div>
)
export default Dialog

Staticize

Props

• title：弹窗标题

• message：内容信息

函数行为

• 返回一个Promise 对象，接收一个 fullfill

• 作为 Resolve 时参数。

• 创建一个div, 并添加到 body 中，在该 div 中渲染出 Dialog。

• close 函数移除该 div， 并作为Dialog 的 onCancel 属性

• onConfirm 中 执行 fullfill 和 close

import React from 'react'
import ReactDOM from 'react-dom'
import Dialog from './Dialog'
const staticize = props =>
  new Promise((fulfill) => { // 此处参数需用圆括号，否则 eslint 报错
    const holder = document.createElement('div')
    document.body.appendChild(holder)
    const close = () => {
      document.body.removeChild(holder)
    }
    ReactDOM.render(
      <Dialog
        {...props}
        onCancel={close}
        onConfirm={() => {
          close()
          fulfill()
        }}
      />,
      holder
    )
  })
export default staticize

相关学习推荐：react视频教程