如何用React实现一个功能强大的Modal弹窗组件？

本文共计1559个文字，预计阅读时间需要7分钟。

本文将分享一个React实现Modal弹窗效果的简单示例代码。以下是一个基础的Dialog.js文件内容，包含必要的React和钩子函数的导入，以及React DOM的引用。

javascriptimport React, { useMemo, useEffect, useState } from 'react';import ReactDOM from 'react-dom';

const Dialog=({ isOpen, onClose, children })=> { useEffect(()=> { if (isOpen) { // 确保点击弹窗外区域时关闭弹窗 window.addEventListener('click', handleClickOutside); } return ()=> { window.removeEventListener('click', handleClickOutside); }; }, [isOpen]);

const handleClickOutside=(event)=> { if (event.target===event.currentTarget) { onClose(); } };

return useMemo(()=> ( {children} ), [isOpen, onClose, children]);};

export default Dialog;

这段代码实现了一个简单的Modal组件，包括弹窗背景和内容区域。当点击弹窗外区域时，会触发关闭弹窗的逻辑。