我如何使用带有响应的循环？

小编典典

我如何使用带有响应的循环？

reactjs

我是一个非常新的响应者，我真正想要的是一个简单的for循环，该循环为我数组中的每个用户创建menuitem元素，并以其名字作为其名字。所以这就是我要写的方式，但是我不知道如何做出反应。我想也许应该在地图上，但我似乎无法使它正常工作，希望这里的任何人都可以帮助我。

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

阅读 287

2020-07-22

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

2020-07-22