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视频教程

以上就是react怎么做弹框的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » React 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏