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