react 弹框组件

在这里插入图片描述

react没有slot插槽，但是可以直接通过{{props.children}}获取父组件标签中的内容

import React, { Component, useEffect } from 'react';
import { createPortal } from 'react-dom';
import CSSTransition from 'react-transition-group/CSSTransition';
import { Scrollbars } from 'react-custom-scrollbars';
import closePng from '../../static/icon/close.svg';
import './index.css';

function Dialog(props) {
	const { left, top, width, height } = props;
	if (!document.querySelector('#dialog')) {
		const htmlDOM = document.createElement('div');
		htmlDOM.setAttribute('id', 'dialog');
		document.body.appendChild(htmlDOM);
	}
	useEffect(() => {
		if (!document.querySelector('#mask')) {
			const maskDOM = document.createElement('div');
			maskDOM.setAttribute('id', 'mask');
			document.body.appendChild(maskDOM);
		}

		return componentWillUnmount;
	}, []);
	// 移除弹框
	function componentWillUnmount() {
		// 有mask和dialog节点时候再移除
		if (document.querySelector('#mask') && document.querySelector('#dialog')) {
			const dialog = document.getElementById('dialog');
			document.body.removeChild(dialog);
			const mask = document.getElementById('mask');
			document.body.removeChild(mask);
		}
	}
	// 关闭弹框
	function onClose() {
		props.closeDialog(false);
	}

	// 内容
	const html = (
		<div
			className='dialog_box'
			style={{
				position: 'fixed',
				left,
				top,
				width,
				height,
				transform: `translate(-50%,-50%)`,
			}}
		>
			<div className='dialog_header'>
				<div>{props.title}</div>
				<img className='close_icon' width='16' onClick={onClose} src={closePng} alt='x'></img>
			</div>
			<div className='dialog_body'>
				<Scrollbars style={{ height: `100%`, width: `100%` }}>
					<div>{props.children}</div>
				</Scrollbars>
			</div>
		</div>
	);
	// createPortal(html, DOM)可以吧html注册到指定DOM里
	return <>{createPortal(html, document.getElementById('dialog'))}</>;
}
Dialog.defaultProps = {
	// title: '弹框',
	left: '50%',
	top: '40%',
	width: 600,
	height: 400,
};
export default Dialog;

//过度动画包裹着 可以删除
<CSSTransition in={state.isDialog} timeout={500}  classNames='dialog_animation'>
	<>
		{state.isDialog && (
			<Dialog title={'提示'} isDialog={state.isDialog} closeDialog={closeDialogHandle}>
				<div>111</div>
				<button onClick={addHandler}>累加{num}</button>
			</Dialog>
		)}
	</>
</CSSTransition>