React点击卡片时如何仅打开对应单个Modal弹窗

你的代码存在5个核心问题，导致点击卡片弹出所有模态框：

• 模态框渲染逻辑错误：当模态框开关为true时，你遍历了整个cards数组，为每一张卡片都生成了一个模态框DOM，自然会同时弹出所有卡片的模态框。
• 状态设计缺陷：仅用布尔值存储模态框的开/关状态，没有记录「当前被点击的是哪张卡片」，无法定位要展示的单个卡片内容。
• 未定义变量报错：模态框展示判断用了未声明的newsModalIsOpen变量，会直接触发JS引用错误。
• 事件冒泡未处理：模态框外层容器绑定了关闭事件，但内部内容区没有阻止事件冒泡，点击iframe/模态框内容也会误触发关闭。
• 字段名、标签不匹配：需求中卡片标题字段为title、要求用h1标签渲染，现有代码取的是card.cardTitle、用的h2标签，不符合需求且会导致标题无法正常渲染。

调整状态设计：不再单独用布尔值存模态框开关，直接用一个状态存储当前激活的卡片对象，默认值为null：

• 状态值为null时，代表模态框关闭
• 状态值为卡片对象时，代表模态框打开，可直接读取对应卡片的url属性
• 关闭模态框时把状态重置为null，iframe的src会自动重置为空，完全符合需求

同时调整渲染逻辑：模态框全局只需要写1次，不需要遍历卡片数组渲染，仅在激活卡片存在时挂载即可。

修复后的完整代码：

import React,{useEffect, useState} from 'react'
import { allCards } from '../functions/functions'


const Cards = () => {
  const [cards, setCards] = useState(null)
  // 存储当前打开的卡片，null代表模态框关闭
  const [activeCard, setActiveCard] = useState(null);

  useEffect(() => {
    allCards(setCards)
  }, [])

  // 打开模态框时传入当前点击的卡片对象
  function openCardModal(card) {
    setActiveCard(card);
  }

  function closeModalHandler() {
    // 关闭时重置为null，iframe src自动清空
    setActiveCard(null);
  }
  
  return (
    <main>
      {cards !== null ? (
        cards.map(card => (
          <div 
            key={card._id} 
            className='card-preview' 
            onClick={() => {
              console.log(`clicked on card ${card._id}`)
              openCardModal(card)
            }}
          >
            <h1 className='card-title'>{card.title}</h1>
          </div>
        ))
      ) : ('No cards found')}

      {/* 仅当存在激活卡片时渲染单个模态框 */}
      {activeCard && (
        <div className='cardmodalcontainer' onClick={closeModalHandler}>
            <div 
              className='modal-container' 
              // 阻止冒泡，点击内容区不关闭模态框
              onClick={(e) => e.stopPropagation()}
            >
              <iframe 
                src={activeCard.url} 
                frameBorder="0" 
                className='cardmodal'
              >
              </iframe>
            </div>
        </div>
      )}
    </main>
  )
}

export default Cards

• 点击任意卡片：仅传入当前点击的卡片到状态，渲染1个模态框，iframe加载对应卡片的url
• 点击模态框遮罩层：状态重置为null，模态框卸载，iframe src自动清空
• 点击模态框内部内容：不会触发关闭，交互符合常规模态框逻辑

内容的提问来源于stack exchange，提问作者mcd-user