react實現(xiàn)全局組件確認彈窗

更新時間：2022年08月23日 14:29:22 作者：云幻★辰

這篇文章主要為大家詳細介紹了react實現(xiàn)全局組件確認彈窗，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本例基于react實現(xiàn)了一個簡單的確認彈窗，可以讓我們在項目中根據(jù)需要隨時調(diào)用

創(chuàng)建全局modal組件

此處我將彈窗模態(tài)框獨立出來，用戶可以通過傳入組件或Element來填充模態(tài)框的內(nèi)容。

import ReactDOM from 'react-dom';
import React, { Fragment } from 'react';
import Button from 'components/common/button';
import Icon from 'components/common/icon';
import css from './index.less';

export interface Props {
? isCancelIcon?: boolean;
? cancelText?: string;
? okText?: string;
? onCancel?: () => void;
? onOk?: () => void;
? footer?: React.ReactNode;
? style?: object;
}

const Modal: React.FC<Props> = React.memo<Props>(({
? isCancelIcon, cancelText, okText, onOk, onCancel, footer, children, style
}) => {

? function renderBtn() {
? ? return (
? ? ? <Fragment>
? ? ? ? <Button?
? ? ? ? ? className={css.btn}
? ? ? ? ? onClick={() => onCancel()}
? ? ? ? >
? ? ? ? ? {cancelText}
? ? ? ? </Button>
? ? ? ? <Button?
? ? ? ? ? className={css.btn}?
? ? ? ? ? onClick={() => onOk()}?
? ? ? ? ? type="primary">
? ? ? ? ? {okText}
? ? ? ? </Button>
? ? ? </Fragment>
? ? );
? }

? return (
? ? <div className={css.masker}>
? ? ? <div className={css.box} style={{ ...style }} >
? ? ? ? {isCancelIcon &&?
? ? ? ? <div?
? ? ? ? ? className={css.cancelIconBox}
? ? ? ? ? onClick={() => onCancel()}
? ? ? ? >
? ? ? ? ? <Icon className={css.cancelIcon} />
? ? ? ? </div>}
? ? ? ? {children}
? ? ? ? <div className={css.btnBox}>
? ? ? ? ? {footer || renderBtn()}
? ? ? ? </div>
? ? ? </div>
? ? </div>
? );
});

Modal.defaultProps = {
? okText: '確定',
? cancelText: '取消',
? onCancel: () => {},
? onOk: () => {},
? isCancelIcon: true
};

export default function ({ content, props }: { content: React.ReactNode; props: Props }) {
??
? const { onOk=() => {}, onCancel=() => {}, ...others } = props;
? /**
? ?* 取消操作，關(guān)閉彈窗
? ?*/
? function handleClose() {
? ? ReactDOM.unmountComponentAtNode(div);
? ? document.body.removeChild(div);
? ? onCancel();
? }
? /**
? ?* 確認操作，關(guān)閉彈窗
? ?*/
? function handleOk() {
? ? ReactDOM.unmountComponentAtNode(div);
? ? document.body.removeChild(div);
? ? onOk();
? }

? let div = document.createElement('div');
? document.body.appendChild(div);
? ReactDOM.render(
? ? <Modal?
? ? ? {...others}
? ? ? onOk={handleOk}?
? ? ? onCancel={handleClose}
? ? >
? ? ? {content}
? ? </Modal>,
? ? div);

? return {
? ? handleOk: () => handleOk(),
? ? handleClose: () => handleClose()
? };
}

less文件

@import '~common/less/index.less';
? .masker{
? ? width: 100vw;
? ? height: 100vh;
? ? background: @mask-color;
? ? position: fixed;
? ? left: 0;
? ? top: 0;
? ? display: flex;
? ? justify-content: center;
? ? flex-direction: column;
? ? align-items: center;
? ? overflow: hidden;
? ? .box{
? ? ? width: 500px;
? ? ? height: 230px;
? ? ? position: relative;
? ? ? background-color: white;
? ? ? position: relative;
? ? ? transition: .2s;
? ? ? animation: showModal .2s ease-in forwards;
? ? ? .cancelIconBox{
? ? ? ? width: 27px;
? ? ? ? height: 27px;
? ? ? ? line-height: 27px;
? ? ? ? text-align: center;
? ? ? ? position: absolute;
? ? ? ? right: 15px;
? ? ? ? top: 22px;
? ? ? ? cursor: pointer;
? ? ? ? .cancelIcon{
? ? ? ? ? .font(17px)
? ? ? ? }
? ? ? }
? ? ? .btnBox{
? ? ? ? width: 100%;
? ? ? ? position: absolute;
? ? ? ? left: 0;
? ? ? ? bottom: 20px;
? ? ? ? padding-right: 10px;
? ? ? ? display: flex;
? ? ? ? flex-flow: row;
? ? ? ? justify-content: flex-end;
? ? ? ? align-items: center;
? ? ? ? ? .btn{
? ? ? ? ? ? margin-right: 10px;
? ? ? ? ? ? .font(12px)
? ? ? ? ? }
? ? ? ? }
? ? }
? }

? @keyframes showModal {
? ? 0%{
? ? ? transform:translate(-100px, 60px) scale(.5) ;
? ? }
? ? 100%{
? ? ? transform:translate(0, 0) scale(1) ?;
? ? }
? }

確認框內(nèi)容組件

此組件用以渲染確認框具體內(nèi)容，項目中可根據(jù)具體情況渲染自己需要的內(nèi)容

tsx文件

import React from 'react';
import classNames from 'classnames';
import Icon from 'components/common/icon';
import modal, { Props as ModalProps } from '../components/modal';
import css from './index.less';

interface Content {
? key: string;
? value: string;
}

export interface Props extends ModalProps {
? title?: string;
? content?: Content[];
}

export default function success({ title, content, ...others }: Props) {

? const node = (
? ? <div className={css.successWrap}>
? ? ? <div className={css.line} />
? ? ? <div className={css.content}>
? ? ? ? <Icon className={css.successIcon} />
? ? ? ? <div className={css.right}>
? ? ? ? ? <span className={css.successTitle}>{title}</span>
? ? ? ? ? {
? ? ? ? ? ? content && content.map((item, index) => {
? ? ? ? ? ? ? return (
? ? ? ? ? ? ? ? <div key={`content_${index}`} className={css.contentList}>
? ? ? ? ? ? ? ? ? <div className={css.key}>{item.key}：</div>
? ? ? ? ? ? ? ? ? <span>{item.value}</span>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? );
? ? ? ? ? ? })
? ? ? ? ? }
? ? ? ? </div>
? ? ? </div>
? ? </div>
? );

? modal({
? ? content: node,
? ? props: others
? });
}

less文件

@import '~common/less/index.less';
? .successWrap{
? ? .line{
? ? ? width: 100%;
? ? ? height: 8px;
? ? ? background-color: #6EA204;
? ? }
? ? .content{
? ? ? display: flex;
? ? ? flex-flow: row;
? ? ? margin: 30px 0 0 40px;
? ? ? .successIcon{
? ? ? ? .font(72px);
? ? ? }
? ? ? .right{
? ? ? ? display: flex;
? ? ? ? flex-flow: column;
? ? ? ? padding-top: 10px;
? ? ? ? margin-left: 20px;
? ? ? ? .successTitle{
? ? ? ? ? .contentList();
? ? ? ? ? .font(18px);
? ? ? ? ? font-weight:500;
? ? ? ? }
? ? ? ? .contentList{
? ? ? ? ? display: flex;
? ? ? ? ? flex-flow: row;
? ? ? ? ? .font(12px);
? ? ? ? ? font-weight:400;
? ? ? ? ? color:@font-title-color;
? ? ? ? ? margin-bottom: 7px;
? ? ? ? ? .key{
? ? ? ? ? ? min-width: 72px;
? ? ? ? ? }
? ? ? ? }
? ? ? }
? ? }
? }

使用全局確認框

只需要在組件中引入全局組件，然后直接調(diào)用全局組件中的方法即可。

import React from 'react';
import success from 'components/common/confirm/success';
const content = [
? {?
? ? key: '代理商姓名',
? ? value: '東東東'
? },
? {?
? ? key: '聯(lián)系方式',
? ? value: '18978765678'
? },
? {?
? ? key: '代理商賬號',
? ? value: '這是一個測試登錄用戶名'
? },
? {?
? ? key: '初始密碼',
? ? value: '這是一個測試登錄用戶名'
? },
];
export interface Props {}
const Components: React.FC<Props> = () => {

return (
?<Button onClick={() => success({?
?content, title: '代理商錄入成功',?
?okText: '繼續(xù)錄入',?
?cancelText: '返回列表'?
?})}
?>成功狀態(tài)框</Button>
)

Components.defaultProps = {};

export default Components

實現(xiàn)效果