返回 div x 次数 ReactJS

Question

我需要在 ReactJS x 中返回以下代码。我正在尝试根据团队中有多少人用名称填充卡片。

所以如果 x 是 5，我需要它出现 5 次。

<div className="row align-items-center justify-content-center m-b-10">

   <h5>Name goes here</h5>

</div>

这是我正在处理的对象类型：

有没有一种干净的方法可以做到这一点？

Answer 1

只需使用：const x = 5Array(x).fill().map((el, index) =>&nbsp;&nbsp; &nbsp; <div className="row align-items-center justify-content-center m-b-10" key={index}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<h5>Name here</h5>&nbsp; &nbsp; &nbsp;</div>)这并不理想，因为您还可以遍历名称数组本身，并获得相同的结果，甚至更清晰。<div>&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; arrayOfNames.map((el, index) => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="row align-items-center justify-content-center m-b-10" key={index}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<h5>`${el.first_name} ${el.last_name}`</h5>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp; &nbsp; ))&nbsp; &nbsp; }</div>

Answer 2

假设你在一个数组中得到了所有的人名。渲染时可以map在数组上使用`：{ yourObject.map((person, idx)=>(&nbsp; &nbsp; <div className="row align-items-center justify-content-center m-b-10" key={idx}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<h5>{person.first_name + " " + person.last_name}</h5>&nbsp; &nbsp; &nbsp;</div>)}（当然，请确保此代码用另一个元素包装）

Answer 3

首先，这取决于你的数据是如何定义的，例如，如果名称在一个数组中，你可以创建一个包含每个 JSX 元素的数组，你可以使用 .map()