如何在JSX中用for循环结合数组生成带CSS类与标签的重复元素？

1. 先准备数据源 #

把需要展示的文本内容整理成一个数组：

const tagTexts = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'];

2. 用数组map方法生成JSX元素 #

React的JSX里不能直接嵌入for循环，用数组的map方法遍历数据源是最常用的方案，批量生成你需要的label元素。注意每个循环生成的元素必须加唯一的key属性，这是React的强制要求：

// 先确保已经导入图标组件
import BsFillCheckCircleFill from 'react-icons/bs';

// 组件内部的JSX代码
<div>
  {tagTexts.map((text, index) => (
    <label key={index} className='tag'>
      <BsFillCheckCircleFill className="tag-icon" /> {text}
    </label>
  ))}
</div>

关键细节说明 #

• 类名配置：直接在className属性里写对应的类名即可，和单个元素的写法完全一致，tag和tag-icon会被正确应用到对应元素上。
• 标签结构：保持和示例一致的嵌套结构，把图标组件和文本内容放在label标签内部就行。
• key属性：这里用数组索引index是最简单的实现方式，如果后续你的标签有更唯一的标识（比如自定义ID），优先用那个作为key，避免索引可能带来的渲染问题。

如果需要更复杂的配置（比如每个标签有不同的类名或图标），可以把数据源改成对象数组：

const tags = [
  { text: 'A', iconClass: 'tag-icon' },
  { text: 'B', iconClass: 'tag-icon' },
  // ...其他标签的自定义配置
];

然后在map里对应取值：

{tags.map((tag, index) => (
  <label key={index} className='tag'>
    <BsFillCheckCircleFill className={tag.iconClass} /> {tag.text}
  </label>
))}

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