在JSX内部使用For循环[duplicate]

Question

您能像这样在JSX中使用for循环吗？
或者更确切地说，像这样编写for的最佳方法是什么？

var graph = 
        <div className={"chartContent"}>

        .
        .
        .

            <div className="panel">
                {DataRows.forEach(function(entry) &&
                    <div className="col-sm-2 graphPanel graphPanelExtra">
                        <div className="panel panel-primary">
                            <div>entry</div>
                        </div>
                    </div>
                )}

            </div>
        </div>;

Answer 1

使用一个映射，这样您实际上就返回了元素。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属性-对于react，为了优化元素数组的呈现，每个项都应该有一个唯一的键（不仅仅是数字索引）。