如何为map生成的每个元素设置不同X值及自定义className属性

嘿，我来帮你搞定这两个需求！不管是给每个元素设置不同的left值，还是添加独特的className，核心都是利用map方法的第二个参数——索引（index），它会给每个遍历到的元素分配一个唯一的序号（从0开始递增）。下面一步步给你演示：

一、给每个元素添加独特的className #

你可以把index和基础类名拼接起来，生成每个元素独有的类。修改你的代码如下：

const sportList = sports.map((sport, index) => (
  // 添加index参数，用模板字符串拼接出独特className
  <div className={`show-test show-test-${index}`} key={sport.id}>
    <div className="show">{sport.name}</div>
    <div className="channel-time">
      {`${dStart.getHours()}:${dStart.getMinutes()} - ${dEnd.getHours()}:${dEnd.getMinutes()}`}
    </div>
  </div>
))

• 这样每个div会同时拥有通用类show-test和独特类show-test-0、show-test-1、show-test-2，之后你就能在CSS里针对这些独特类设置不同的left值或者其他样式了。
• 别忘了加上key={sport.id}，React要求列表项必须有唯一的key，用数据本身的id比用index更稳定（如果数组元素顺序可能变化的话）。

二、直接设置动态left内联样式 #

如果不想通过className间接设置，也可以直接用index计算left值，通过内联样式绑定：

const sportList = sports.map((sport, index) => {
  // 自定义计算逻辑，比如每个元素间隔100px
  const dynamicLeft = index * 100;
  return (
    <div 
      className="show-test" 
      key={sport.id}
      style={{ left: `${dynamicLeft}px` }} // 绑定动态left值
    >
      <div className="show">{sport.name}</div>
      <div className="channel-time">
        {`${dStart.getHours()}:${dStart.getMinutes()} - ${dEnd.getHours()}:${dEnd.getMinutes()}`}
      </div>
    </div>
  )
})

三、两者结合（推荐） #

当然你也可以同时添加独特className和动态内联样式，灵活度更高。这里还优化了时间显示，让小时/分钟统一为两位数字：

const sportList = sports.map((sport, index) => (
  <div 
    className={`show-test sport-item-${index}`} 
    key={sport.id}
    style={{ left: `${index * 80}px` }}
  >
    <div className="show">{sport.name}</div>
    <div className="channel-time">
      {`${dStart.getHours().toString().padStart(2, '0')}:${dStart.getMinutes().toString().padStart(2, '0')} - ${dEnd.getHours().toString().padStart(2, '0')}:${dEnd.getMinutes().toString().padStart(2, '0')}`}
    </div>
  </div>
))

核心思路就是利用map的index参数来区分每个生成的元素，不管是生成类名还是计算样式值都非常方便！

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