在 JSX 中使用 For 循环

Question

你能for像这样在 JSX 中使用循环吗？
或者更确切地说，写这样的 a 的正确方法是什么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属性 - 为了优化元素数组的呈现，每个项目都应该有一个唯一的键（不仅仅是数字索引）。