当前位置：首页 > React

react实现弹框

2026-01-27 01:17:15React

使用 React 实现弹框

React 中实现弹框可以通过多种方式，包括使用原生组件、第三方库或自定义组件。以下是几种常见方法：

使用 React 原生状态管理

通过 React 的 useState 和条件渲染实现弹框：

import React, { useState } from 'react';

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

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>打开弹框</button>
      {isOpen && (
        <div className="modal">
          <div className="modal-content">
            <span onClick={() => setIsOpen(false)}>&times;</span>
            <p>弹框内容</p>
          </div>
        </div>
      )}
    </div>
  );
}

使用第三方库（如 React Modal）

安装 react-modal 库：

npm install react-modal

使用示例：

import React, { useState } from 'react';
import Modal from 'react-modal';

Modal.setAppElement('#root'); // 防止屏幕阅读器报错

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

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>打开弹框</button>
      <Modal
        isOpen={isOpen}
        onRequestClose={() => setIsOpen(false)}
        contentLabel="示例弹框"
      >
        <h2>弹框标题</h2>
        <p>弹框内容</p>
        <button onClick={() => setIsOpen(false)}>关闭</button>
      </Modal>
    </div>
  );
}

自定义弹框组件

创建可复用的弹框组件：

import React from 'react';

function CustomModal({ isOpen, onClose, children }) {
  if (!isOpen) return null;

  return (
    <div className="modal-overlay">
      <div className="modal">
        <button className="close-button" onClick={onClose}>
          &times;
        </button>
        <div className="modal-body">{children}</div>
      </div>
    </div>
  );
}

// 使用示例
function App() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>打开弹框</button>
      <CustomModal isOpen={isOpen} onClose={() => setIsOpen(false)}>
        <h2>自定义弹框</h2>
        <p>这是弹框内容</p>
      </CustomModal>
    </div>
  );
}

添加动画效果

使用 CSS 或动画库（如 Framer Motion）为弹框添加动画：

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

function AnimatedModal({ isOpen, onClose }) {
  return (
    <AnimatePresence>
      {isOpen && (
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          className="modal-overlay"
          onClick={onClose}
        >
          <motion.div
            initial={{ y: 50 }}
            animate={{ y: 0 }}
            className="modal"
            onClick={(e) => e.stopPropagation()}
          >
            {/* 弹框内容 */}
          </motion.div>
        </motion.div>
      )}
    </AnimatePresence>
  );
}

样式建议

为弹框添加基本样式：

react实现弹框

.modal-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;
}

.modal {
  background: white;
  padding: 20px;
  border-radius: 8px;
  max-width: 500px;
  width: 90%;
}

.close-button {
  float: right;
  cursor: pointer;
  font-size: 1.5rem;
}

以上方法涵盖了从简单到复杂的弹框实现方式，可根据项目需求选择适合的方案。

标签: react