在React TypeScript中高效创建16个带自定义ID的游戏卡片

1. 先封装独立的可复用Card组件 #

把重复的卡片结构抽成单独组件，通过属性传递自定义ID和其他需要的参数，避免冗余代码：

// components/Card.tsx
import React from 'react';

// 用TypeScript定义组件属性类型，确保类型安全
interface CardProps {
  id: number;
  onClick?: (id: number) => void; // 可选的点击事件回调
}

const Card: React.FC<CardProps> = ({ id, onClick }) => {
  return (
    <div 
      className="card" 
      onClick={() => onClick?.(id)}
      data-id={id} // 可选：把ID存在DOM属性里，方便后续DOM操作
    >
      <h1>Click Me! (ID: {id})</h1>
    </div>
  );
};

export default Card;

2. 在Cards组件中批量生成16个卡片 #

利用数组遍历快速生成，无需重复复制粘贴：

// components/Cards.tsx
import React from 'react';
import Card from './Card';

const Cards = () => {
  // 生成1-16的ID数组（如果需要从0开始，去掉+1即可）
  const cardIds = Array.from({ length: 16 }, (_, index) => index + 1);

  // 示例：处理卡片点击事件
  const handleCardClick = (cardId: number) => {
    console.log(`卡片 ${cardId} 被点击`);
    // 这里可以添加游戏逻辑，比如翻转卡片、匹配验证等
  };

  return (
    <div className="cards-container">
      {cardIds.map(id => (
        <Card 
          key={id} // React列表必须的唯一key，这里用ID就足够
          id={id} 
          onClick={handleCardClick} 
        />
      ))}
    </div>
  );
};

export default Cards;

额外优化建议 #

• 动态卡片内容：如果后续需要不同的卡片文本、图片，可把数据存在数组里（比如const cardList = [{id:1, content:'A'}, {id:2, content:'B'}, ...]），遍历这个数组渲染即可。
• 样式布局：给cards-container加CSS样式（比如网格布局display: grid），可以轻松控制16个卡片的排列方式。
• 类型扩展：如果需要给卡片添加更多属性（比如状态、图标），直接在CardProps接口里添加对应字段即可，TypeScript会自动做类型校验。

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