javascript - JS 从 2 个循环/数组创建评分

Question

我正在尝试创建一个如下所示的基本评级组件：

◼◼◼◻◻（评分：5 分中的 3 分）

我在 JSX 中有以下代码：

var score = 3; 
var range = 5;

{ [...Array(range)].map((e, i) => (
  <div className="rating-item" data-rating-count={ i + 1 }></div>
)) }

这将返回范围但不显示评分：

◻ ◻ ◻ ◻ ◻ 

如何组合score和range值并将类名称添加active到评级项目？

我正在尝试获取以下 HTML：

<div class="rating-item active" data-rating-count="1"></div>
<div class="rating-item active" data-rating-count="2"></div>
<div class="rating-item active" data-rating-count="3"></div>
<div class="rating-item" data-rating-count="4"></div>
<div class="rating-item" data-rating-count="5"></div>

这将输出：◼◼◼◻◻</p>

标签： javascriptreactjs

Answer 1

我认为您需要像这样修改您的代码

var score = 3; 
var range = 5;

{ [...Array(range)].map((e, i) => (
  <div className={"rating-item " + (i < score ? "active": "")} data-rating-count={ i + 1 }></div>
)) }