点击Grid单元格时如何每次渲染新弹窗？

问题核心 #

你遇到的问题根源在于：单个布尔值状态无法区分多个弹窗实例，且react-new-window依赖浏览器的window.open()机制——如果窗口名name重复，浏览器会复用已有窗口而非新开。要实现点击单元格唤起独立弹窗，得从多弹窗状态跟踪和窗口唯一性保证两方面入手。

解决方案 #

1. 用数组存储活跃弹窗的唯一标识（比如单元格ID），每个弹窗对应独立的状态项
2. 给每个NewWindow组件设置唯一的name属性，让浏览器能区分不同窗口
3. 点击单元格时添加对应ID到数组，关闭弹窗时移除该ID

代码示例 #

import { useState } from 'react';
import NewWindow from 'react-new-window';

const Main = () => {
  // 用数组存储当前打开的弹窗对应的单元格ID
  const [activePopups, setActivePopups] = useState([]);

  // 单元格点击事件：添加新弹窗（避免重复打开同一单元格的弹窗）
  const handleCellClick = (cellId) => {
    if (!activePopups.includes(cellId)) {
      setActivePopups(prev => [...prev, cellId]);
    }
  };

  // 弹窗关闭事件：移除对应ID，销毁弹窗
  const handlePopupClose = (cellId) => {
    setActivePopups(prev => prev.filter(id => id !== cellId));
  };

  return (
    <>
      {/* 你的Grid组件，点击单元格时传入对应ID */}
      <Grid onCellClick={handleCellClick} />

      {/* 渲染所有活跃弹窗，每个弹窗都是独立实例 */}
      {activePopups.map(cellId => (
        <NewWindow
          key={cellId} // React需要唯一key区分不同组件实例
          name={`cell-popup-${cellId}`} // 唯一窗口名，避免浏览器复用已有窗口
          title={`单元格-${cellId}详情`}
        >
          <Popup cellId={cellId} onClose={handlePopupClose} />
        </NewWindow>
      ))}
    </>
  );
};

// 弹窗组件示例，可根据需求传递单元格数据
const Popup = ({ cellId, onClose }) => {
  return (
    <div style={{ padding: '20px' }}>
      <h3>单元格 {cellId} 的弹窗内容</h3>
      <button onClick={() => onClose(cellId)}>关闭弹窗</button>
    </div>
  );
};

关键注意点 #

• 唯一key和name：key确保React渲染独立的NewWindow组件，name确保浏览器新开窗口而非复用，二者必须同时设置
• 避免重复弹窗：添加ID前检查是否已存在，防止同一单元格多次点击重复打开窗口
• 状态管理：用数组/对象替代单个布尔值，才能同时跟踪多个弹窗的打开状态

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