重复的“a”标签取决于我从api响应得到的数字[重复]

Question

这个问题在这里已有答案：

• Possible to multiply or concat JSX? 3回答

所以，我还是Reactjs的初学者。我想在“.menu”div中复制这个“a”标签，具体取决于来自api响应的数字。

<div className="menu">
    <a onClick={this.targetValue} href="#">1</a>
</div>

如果我从api响应返回的数量是这样的

quantity: "3"

我想像这样复制“a”标签3次，并根据其数量更改文本内容

    <div className="menu">
        <a onClick={this.targetValue} href="#">1</a>
        <a onClick={this.targetValue} href="#">2</a>
        <a onClick={this.targetValue} href="#">3</a>
    </div>

Answer 1

请记住，JSX仍然是JavaScript（顶部有几位）。所以，如果你想重复一些事情，你可以循环。有许多方法可以在JS中进行迭代，这里有一些。

For loop：

render() {
  const links = [];

  // Loop the number of times your API dictates
  for (step = 0; step < 5; step++) {
    // Create a link for each number
    // You want to add the `key` property to each child when iterating
    links.push(<a key={step} onClick={this.targetValue} href="#">{step + 1}</a>)
  }

  return (
    <div className="menu">
      {links} {/* render your links */}
    </div>
  )
}

Nicer array method：

render() {
  return (
    <div className="menu">
      {Array(5).fill(null).map((_, index) => (
         <a key={index} onClick={this.targetValue} href="#">{index + 1}</a>
      ))}
    </div>
  )
}

加载[_times]（Cakesupoi）：

https://lodash.com/docs/4.17.5#times

更新：添加了

render() {
  return (
    <div className="menu">
      {_.times(5, i => (
        <a onClick={this.targetValue} key={i} href="#">{i + 1}</a>
      ))}
    </div>
  )
}

和lodash，谢谢@JoshKelly