React数组生成图片：按数值范围添加opacity-50样式问题

你可以通过动态判断索引范围为指定区间内的图片添加样式，核心是在map遍历过程中检查当前元素索引是否落在目标范围内，再决定是否追加opacity-50类。

具体实现代码 #

// 定义范围参数：以你给出的数值5（起始索引）和6（乘数）为例
const rangeStart = 5;
const totalInRange = 6 * 5;
const rangeEnd = rangeStart + totalInRange - 1;

{Array.from({ length: 100 }).map((_, i) => {
  // 判断当前索引是否在目标范围内
  const shouldDim = i >= rangeStart && i <= rangeEnd;
  
  return (
    <img
      key={i}
      className={`h-12 object-contain cursor-pointer ${shouldDim ? 'opacity-50' : ''}`}
      src="/images/panneau.png"
      alt={`panel-${i}`}
    />
  );
})}

范围逻辑调整说明 #

如果你的“6*5范围内”是指前30个元素（索引0到29），只需把判断条件改成：

const shouldDim = i < 6 * 5;

如果是其他范围规则（比如索引10到40），直接修改rangeStart和rangeEnd的取值即可，逻辑完全通用。

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