Question

我想重复“★”作为React中状态数字的次数。

我该怎么办？

我要这样打印。

js★★★
ts★★
html★★★

state = {
  myScores: [
    { name: "js", score: 3 },
    { name: "ts", score: 2 },
    { name: "html", score: 3 }
  ]
}

...

const myScores = this.state.myScores.map(
  ({name, score}) => (
    <div>
      {name}
      {
        for(let i=0; i<score; i++) {
          <div>★</div>
        }
      }
    </div>
  )
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

您需要做的就是用替换循环。

<div>{"★".repeat(score)}</div>

为什么您的代码无法按预期的方式工作。

在实践中，OP的代码将引发错误，因为JSX中不能包含JavaScript语句（即，它不会呈现任何内容）。 @FelixKling 在评论中对此进行了很好的解释。
由于迭代遍历for循环时，您每次都会添加一个新的div（它是一个块元素），因此它将占用整个宽度。您可以在此处阅读有关块元素的更多信息 https://www.w3schools.com/html/html_blocks.asp

我想在状态中重复“★”和状态数字一样多的次数

1 个答案: