如何根据数组上的索引数量显示一组动态 div

Question

>我正在从FCC创建维基百科查看器。我想根据数组上的值数量显示一组div。像这样：

const arrayWithValues= ['1','2','3','4','5'];

所以对于数组上的每个值，我希望有这样的东西：

//the key is passed as the index of the array
<div key={i}> content here </div>
<div key={i}> content here </div>

所以我在使用map之前已经看过了，但不记得如何使用它。

问题是我有一个空数组，但是在用户使用给定输入进行搜索之后。我进行 api 调用，结果被推送到数组中。我正在使用 act，所以我在我的状态上有那个数组，我想获取这些值并能够在div 内的页面上显示它们(具有给定的类名等......

Answer 1

您可以使用这样的映射来渲染div集

arrayWithValues.map((value, i) => {
return (<div key={i}> content here </div>)
})

Answer 2

Piyush的回答是中肯的。如果你想遵循 React 架构，最终结果将如下所示：

class ItemList extends React.Component {
const arrayWithValues= ['1','2','3','4','5'];
render() {
let listOfValues = arrayWithValues.map((value) => {
return (<Item arrayValue={ value } />)
});
return (
{listOfValues}
);
}
}
export default ItemList;

class Item extends React.Component {
constructor(props) {
super(props);
}
render() {
return (<div key={this.props.arrayValue}> content here </div>);
}
}
export default Item;

编辑：我已经根据反馈调整了这一点。

Answer 3

arrayWithValues.map((val, i) => (<div key={i}>content here</div>));