在JSX中使用For循环

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

  • 循环内React JSX 38答案

  • 使用地图,以便实际返回元素。 一个foreach不会返回任何东西。 您使用&&也是无效的。

    var graph = 
            <div className={"chartContent"}>
                <div className="panel">
                    {DataRows.map(entry =>
                        <div key={entry.id} className="col-sm-2 graphPanel graphPanelExtra">
                            <div className="panel panel-primary">
                                <div style={{textAlign: 'center'}}>entry</div>
                            </div>
                        </div>
                    )}
                </div>
            </div>;
    

    请注意,我添加了一个key属性 - 为了响应优化元素数组的渲染,每个项目应该有一个唯一键(不仅仅是数字索引)。


    而不是使用forEach循环,你可以使用Array.prototype.map()

    var graph = 
        <div className={"chartContent"}>
    
        .
        .
        .
    
            <div className="panel">
                {DataRows.map((entry) => (
                    <div className="col-sm-2 graphPanel graphPanelExtra">
                        <div className="panel panel-primary">
                            <div style={{textAlign: 'center'}}>entry</div>
                        </div>
                    </div>
                   )
                )}
    
            </div>
        </div>;
    

    forEach不返回任何内容。 你不会看到任何结果。 相反,你可以使用.map例如

     {
         DataRows.map(function (entry) {
                 return <div className="col-sm-2 graphPanel graphPanelExtra">
                            <div className="panel panel-primary">
                                <div style={{textAlign: 'center'}}>entry</div>
                            </div> < /div>
                    })
    }
    
    链接地址: http://www.djcxy.com/p/52043.html

    上一篇: Use For loop inside JSX

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