Question

我有以下代码为组件渲染5颗星。我希望它总是精确到5星，但根据评级，其余的星星应该是空白的。我有以下代码来实现这一点。：

const stars = []
for (let i = 0; i < 5; i++){
  if (i < Math.floor(rating)){
    stars.push(<span className="feedback-star full"></span>)
  } else {
    stars.push(<span className="feedback-star blank"></span>)
  }
}

React说我应该为每个跨度都有一个独特的关键道具。应如何有效实现这一目标？（我想我可以使用新的Date（）或Math.random（），但是不会在100多个反馈列表中进行大量不必要的操作，每个5星？）

Answer 1

您阅读了React中的键以及如何有效地使用它们。您可能会发现this post很有用。基本上是：

React使用密钥prop来理解组件到DOM元素的关系，然后将其用于reconciliation process。因此，密钥始终保持唯一非常重要，否则React很有可能会混淆元素并改变不正确的元素。

话虽这么说，为了解决你的问题，试试这个：

let stars = []
for (let i = 0; i < 5; i++){
  if (i < Math.floor(rating)){
    stars.push(<span key={i} className="feedback-star full"></span>)
  } else {
    stars.push(<span key={i} className="feedback-star blank"></span>)
  }
}

对于更短的语法，您也可以这样做：

let stars = []
for (let i = 0; i < 5; i++){
  stars.push(<span key={i} className={"feedback-star " + (i < Math.floor(rating) ?  "full" : "blank")}></span>)
}

另请注意，对于const，您正在创建对变量的只读引用，并且不得对其进行变更。对于此方案，请改用let。

评级明星列表的好关键道具

1 个答案: