我如何使用for循环与反应？

Question

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

for (var i = 0; i < Users.length; i++) {
  <MenuItem eventKey=[i]>User.firstname[i]</MenuItem>
}

Answer 1

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

如果你想使用一个循环,那很好:

render() {
    let menuItems = [];
    for (var i = 0; i < Users.length; i++) {
        menuItems.push(<MenuItem eventKey=[i]>User.firstname[i]</MenuItem>);
    }
    return <div>{menuItems}</div>;
}

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

render() {
    return <div>
    {
        Users.map((user, i) =>
            <MenuItem eventKey=[i]>User.firstname[i]</MenuItem>)
    }
    </div>;
}

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

Answer 2

使用地图您可以执行以下操作：

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