重复"a"标签取决于我从 api 响应中获得的数字

Question

所以，我仍然是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 中迭代的方法有很多种，这里有几种。

对于循环：

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>
)
}

更好的阵列方法：

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

Lodash [_.times}(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>
)
}

更新：添加了keys和lodash，谢谢@JoshKelly