react 实现对话框

使用 React 实现对话框的方法

使用 React 内置状态管理

通过 React 的 useState 钩子管理对话框的显示与隐藏状态。创建一个按钮触发对话框的显示，并在对话框内添加关闭按钮。

import React, { useState } from 'react';

function DialogExample() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>打开对话框</button>
      {isOpen && (
        <div className="dialog-overlay">
          <div className="dialog-content">
            <h3>对话框标题</h3>
            <p>对话框内容...</p>
            <button onClick={() => setIsOpen(false)}>关闭</button>
          </div>
        </div>
      )}
    </div>
  );
}

使用 CSS 样式美化对话框

为对话框添加基本样式，使其居中显示并带有半透明背景遮罩。

.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.dialog-content {
  background: white;
  padding: 20px;
  border-radius: 8px;
  max-width: 500px;
  width: 100%;
}

使用第三方库实现高级功能

对于更复杂的需求（如动画、拖拽、尺寸调整等），可以使用现成的对话框组件库：

1. React Modal
   安装：npm install react-modal
   示例代码：

   import React, { useState } from 'react';
   import Modal from 'react-modal';
   
   function App() {
     const [isOpen, setIsOpen] = useState(false);
     return (
       <div>
         <button onClick={() => setIsOpen(true)}>打开对话框</button>
         <Modal
           isOpen={isOpen}
           onRequestClose={() => setIsOpen(false)}
           contentLabel="示例对话框"
         >
           <h3>对话框标题</h3>
           <p>对话框内容...</p>
           <button onClick={() => setIsOpen(false)}>关闭</button>
         </Modal>
       </div>
     );
   }

2. Material-UI Dialog
   安装：npm install @mui/material
   示例代码：

   

   import React, { useState } from 'react';
   import Button from '@mui/material/Button';
   import Dialog from '@mui/material/Dialog';
   import DialogActions from '@mui/material/DialogActions';
   import DialogContent from '@mui/material/DialogContent';
   import DialogTitle from '@mui/material/DialogTitle';
   
   function MuiDialogExample() {
     const [open, setOpen] = useState(false);
     return (
       <div>
         <Button variant="contained" onClick={() => setOpen(true)}>
           打开对话框
         </Button>
         <Dialog open={open} onClose={() => setOpen(false)}>
           <DialogTitle>对话框标题</DialogTitle>
           <DialogContent>对话框内容...</DialogContent>
           <DialogActions>
             <Button onClick={() => setOpen(false)}>关闭</Button>
           </DialogActions>
         </Dialog>
       </div>
     );
   }

实现可复用的对话框组件

创建一个可复用的对话框组件，通过 props 接收标题、内容和控制逻辑。

import React from 'react';

function ReusableDialog({ isOpen, onClose, title, children }) {
  if (!isOpen) return null;
  return (
    <div className="dialog-overlay">
      <div className="dialog-content">
        <h3>{title}</h3>
        <div>{children}</div>
        <button onClick={onClose}>关闭</button>
      </div>
    </div>
  );
}

// 使用示例
function ParentComponent() {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <div>
      <button onClick={() => setIsOpen(true)}>打开对话框</button>
      <ReusableDialog 
        isOpen={isOpen} 
        onClose={() => setIsOpen(false)}
        title="自定义标题"
      >
        <p>自定义内容...</p>
      </ReusableDialog>
    </div>
  );
}

添加动画效果

使用 CSS 过渡或动画库（如 Framer Motion）为对话框添加平滑的打开/关闭动画。

import { motion, AnimatePresence } from 'framer-motion';

function AnimatedDialog({ isOpen, onClose }) {
  return (
    <AnimatePresence>
      {isOpen && (
        <motion.div
          className="dialog-overlay"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
        >
          <motion.div
            className="dialog-content"
            initial={{ y: 50 }}
            animate={{ y: 0 }}
            exit={{ y: 50 }}
          >
            <h3>动画对话框</h3>
            <button onClick={onClose}>关闭</button>
          </motion.div>
        </motion.div>
      )}
    </AnimatePresence>
  );
}