JSX实现评分组件如何给指定rating-item添加active类展示对应分值

核心实现逻辑：遍历渲染每个评分项时，判断当前项的序号（索引+1）是否小于等于实际分值score，满足条件就给元素追加active类名即可，修改后的完整代码如下：

var score = 3; 
var range = 5;

{ [...Array(range)].map((e, i) => {
  const isActive = (i + 1) <= score;
  return (
    <div 
      className={`rating-item ${isActive ? 'active' : ''}`} 
      data-rating-count={ i + 1 }
      key={i + 1}
    ></div>
  )
}) }

补充说明 #

• 上述代码使用ES6模板字符串拼接类名，符合原生JSX语法规范，无需引入额外依赖
• 额外补充了React列表渲染必填的key属性，避免控制台抛出列表无唯一标识的警告
• 如果项目中已引入classnames工具库，也可以使用更简洁的类名写法：

className={classNames('rating-item', { active: (i + 1) <= score })}

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