小编典典

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

reactjs

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

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

阅读 288

收藏
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