react实现对话框

使用 React 实现对话框

使用 React 内置状态管理

创建一个简单的对话框组件，通过 useState 控制显示与隐藏。

import React, { useState } from 'react';

function Dialog() {
  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>
  );
}

export default Dialog;

使用 Portal 优化渲染

通过 ReactDOM.createPortal 将对话框渲染到 body 层级，避免父组件样式影响。

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

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

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

export default Dialog;

使用第三方库（如 Material-UI）

利用现成的对话框组件库快速实现功能。

import React, { useState } from 'react';
import Button from '@material-ui/core/Button';
import Dialog from '@material-ui/core/Dialog';
import DialogTitle from '@material-ui/core/DialogTitle';
import DialogContent from '@material-ui/core/DialogContent';
import DialogActions from '@material-ui/core/DialogActions';

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

  return (
    <div>
      <Button variant="contained" color="primary" onClick={() => setIsOpen(true)}>
        打开对话框
      </Button>
      <Dialog open={isOpen} onClose={() => setIsOpen(false)}>
        <DialogTitle>对话框标题</DialogTitle>
        <DialogContent>
          <p>对话框内容</p>
        </DialogContent>
        <DialogActions>
          <Button onClick={() => setIsOpen(false)} color="primary">
            关闭
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

export default MaterialDialog;

自定义动画效果

通过 CSS 或动画库（如 Framer Motion）为对话框添加动画。

import React, { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';

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

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>打开对话框</button>
      <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>
              <p>对话框内容</p>
              <button onClick={() => setIsOpen(false)}>关闭</button>
            </motion.div>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}

export default AnimatedDialog;

对话框传参与回调

通过 props 实现对话框内容的动态传递和回调函数。

import React, { useState } from 'react';

function DynamicDialog({ title, content, onConfirm }) {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>打开对话框</button>
      {isOpen && (
        <div className="dialog-overlay">
          <div className="dialog-content">
            <h3>{title}</h3>
            <p>{content}</p>
            <button onClick={() => setIsOpen(false)}>取消</button>
            <button onClick={() => { onConfirm(); setIsOpen(false); }}>确认</button>
          </div>
        </div>
      )}
    </div>
  );
}

export default DynamicDialog;