reactjs - 如何在 React 中使用 for 循环？

Question

这个问题已经有答案了:

Loop inside React JSX (84 个回答)

How to loop and render elements in React.js without an array of objects to map? (6 个回答)

for loop in react (1 个回答)

已关闭 5 年前。

我对 react 非常陌生，我真正想要的是一个简单的 for 循环，为我的数组中的每个用户创建 menuitem 元素，其标题是他们的名字。这就是我的写法，但我不知道如何在 react 中做到这一点。我认为它可能应该带有 map ，但我似乎无法让它工作，希望这里的任何人都可以帮助我。

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>;
}

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

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

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