如何加载组件在一个循环传递一个对象的属性作为道具?

Question

我想在循环中呈现这个组件:

<OptionsFly title={prop} text={prop}></OptionsFly>

根据数组中对象的个数:

let options = [{
title: "Regala ",
text: "Sorprende ",
}, {
title: "Marc",
text: " sorpresa",
}];

也就是说，我想加载组件两次，并传递相应的属性作为props

Answer 1

您可以使用map函数对数组中的每个元素执行操作。

<>
{options.map((el, i) => 
<OptionsFly key={`${el.title}_${i}`} title={el.title} text={el.text} />
)}
</>

Answer 2

你可以映射到它，每次你渲染你的组件，像这样

const xNumberOfYouComponent=options.map((option,index)=>{
return( 
<div key={index}>
//you will loop through every single item inside your options array 
<OptionsFly title={option.title} text={option.text}></OptionsFly>
</div>
}