如何在React中使用for循环？

Question

我对React非常陌生，我只想要一个简单的for循环来为我的数组中的每个用户创建menuitem元素，其标题应该是他们的名字。这就是我会怎么写它，但我不知道如何在React中实现。我认为可能需要用到map，但我似乎也无法让它工作，希望有人能帮助我。

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

- novafluff

---

你不能使用 for 循环在 JSX 元素内进行迭代。请使用 map 代替。 - Mostafiz Rahman

@MostafizRahman 是正确的。React 组件期望是一个字符串、另一个组件或者一组组件的数组。而 for 循环并不返回这些内容。这就是为什么我们必须将 for 循环的值存储在变量中并返回该变量的原因。请参见 如何在 React JSX 中循环 - React FAQ 或者这个 答案。 - Victor Ofoegbu

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而不仅仅是数组索引。

- Tom Fenech

Answer 2

使用 map 可以做到以下几点：

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

- RMontes13