ReactJS弹窗问题：点击不同分类时关闭旧弹窗并打开新弹窗

核心问题在于你每次点击分类都可能创建了新的弹窗组件实例，而非复用同一个弹窗并更新内容。只需通过单一状态控制弹窗的显示/隐藏与内容，就能解决叠加问题。

实现步骤 #

1. 在父组件（首页）维护弹窗状态 #

只需要两个状态变量：

• isModalOpen：控制弹窗的显示/隐藏
• modalData：存储当前弹窗要展示的分类数据

2. 处理分类点击逻辑 #

点击分类时，若弹窗已打开，先关闭弹窗，待过渡完成后更新数据并重新打开；若未打开，直接设置数据并打开弹窗。

3. 复用单一弹窗组件 #

页面中只渲染一个弹窗实例，通过状态控制其显示状态与内容，避免重复创建DOM节点。

代码示例 #

首页组件（HomePage.jsx）

import { useState } from 'react';
import CategoryModal from './CategoryModal';

function HomePage() {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [currentCategoryData, setCurrentCategoryData] = useState(null);

  const handleCategoryClick = (category) => {
    // 弹窗已打开时，先关闭再更新数据打开
    if (isModalOpen) {
      setIsModalOpen(false);
      // 适配弹窗关闭动画时长，可根据实际调整
      setTimeout(() => {
        setCurrentCategoryData(category);
        setIsModalOpen(true);
      }, 300);
    } else {
      setCurrentCategoryData(category);
      setIsModalOpen(true);
    }
  };

  // 模拟分类数据
  const categories = [
    { id: 1, title: '数码产品', desc: '各类数码设备推荐' },
    { id: 2, title: '家居生活', desc: '实用家居好物分享' },
    { id: 3, title: '户外运动', desc: '户外装备与攻略' },
  ];

  return (
    <div className="home-container">
      {categories.map(category => (
        <button
          key={category.id}
          onClick={() => handleCategoryClick(category)}
          className="category-btn"
        >
          {category.title}
        </button>
      ))}
      {/* 只渲染一个弹窗实例 */}
      <CategoryModal
        isOpen={isModalOpen}
        onClose={() => setIsModalOpen(false)}
        data={currentCategoryData}
      />
    </div>
  );
}

export default HomePage;

弹窗组件（CategoryModal.jsx）

function CategoryModal({ isOpen, onClose, data }) {
  if (!isOpen || !data) return null;

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-card" onClick={(e) => e.stopPropagation()}>
        <button className="close-btn" onClick={onClose}>×</button>
        <h3>{data.title}</h3>
        <p>{data.desc}</p>
      </div>
    </div>
  );
}

export default CategoryModal;

关键说明 #

• 全程只维护一个弹窗DOM实例，通过isOpen和data状态切换内容，从根本避免弹窗叠加。
• 若弹窗有关闭动画，通过setTimeout延迟打开新内容，保证过渡流畅；无动画时可直接更新data并保持isOpen为true，弹窗会自动渲染新数据。
• 若使用第三方弹窗库（如react-modal），逻辑完全一致：用单一状态控制弹窗的显示与内容，而非多次调用打开方法。

内容的提问来源于stack exchange，提问作者Ajay Jha