我如何使用循环与反应?

这个问题在这里已经有了答案:

  • 循环内React JSX 38答案
  • 如何在没有要映射的对象数组的情况下循环并呈现React.js中的元素? 5个答案
  • for循环回答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,而不仅仅是数组索引。


    有了地图,你可以做到:

    Users.map((user, index) => (
      <MenuItem eventKey={index}>user.firstname</MenuItem>
    ));
    
    链接地址: http://www.djcxy.com/p/52041.html

    上一篇: How do i use for loops with react?

    下一篇: For loop in react render method