返回 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 = 5

Array(x).fill().map((el, index) => 

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

         <h5>Name here</h5>

     </div>

)

这并不理想，因为您还可以遍历名称数组本身，并获得相同的结果，甚至更清晰。

<div>

    {

        arrayOfNames.map((el, index) => (

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

                 <h5>`${el.first_name} ${el.last_name}`</h5>

             </div>

        ))

    }

</div>

Answer 2

假设你在一个数组中得到了所有的人名。渲染时可以map在数组上使用`：

{ yourObject.map((person, idx)=>(

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

         <h5>{person.first_name + " " + person.last_name}</h5>

     </div>

)}

（当然，请确保此代码用另一个元素包装）

Answer 3

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