关于reactjs：我如何使用for循环与反应？


How do i use for loops with react?

本问题已经有最佳答案，请猛点这里访问。

我很反应，我真正想要的是一个简单的for循环，为我的数组中的每个用户创建menuitem元素，标题是它们的名字。 所以这就是我写它的方式，但我不知道怎么做反应。 我认为它应该是一张地图，但我似乎无法让它工作，或希望任何人在这里可以帮助我。

1
2
3
for (var i = 0; i < Users.length; i++) {
  <MenuItem eventKey=[i]>User.firstname[i]</MenuItem>
}
相关讨论

组件的render方法或无状态组件函数返回要呈现的元素。

如果你想使用循环，那很好：

1
2
3
4
5
6
7
render() {
    let menuItems = [];
    for (var i = 0; i < Users.length; i++) {
        menuItems.push(<MenuItem eventKey=[i]>User.firstname[i]</MenuItem>);
    }
    return {menuItems};
}

更常见的是看到更实用的样式，例如使用map返回元素数组：

1
2
3
4
5
6
7
8
render() {
    return
    {
        Users.map((user, i) =>
            <MenuItem eventKey=[i]>User.firstname[i]</MenuItem>)
    }
    ;
}

请注意，在任何一种情况下，您都缺少数组中每个元素的key属性，因此您将看到警告。 数组中的每个元素都应该有一个唯一的键，最好是某种形式的ID，而不仅仅是数组索引。

有了地图你可以做：

1
2
3
Users.map((user, index) => (
  <MenuItem eventKey={index}>user.firstname</MenuItem>
));