在 JSX 中使用 For 循环 [重复]答案

【问题标题】：Use For loop inside JSX [duplicate]在 JSX 中使用 For 循环 [重复]
【发布时间】：2018-02-23 07:45:09
【问题描述】：

你能像这样在 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>;

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

使用map 这样您实际上是在返回元素。 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 属性 - 用于优化元素数组的渲染，每个项目都应该有一个唯一的键（不仅仅是数字索引）。

【讨论】：

嗨，多米尼克。如果它的(entry) 是一个键值对。你如何分离价值观？请。
entry 是一个对象吗？在这种情况下，你可以做Object.keys(entry).map(...
是的，对不起。刚看到。谢谢
map 是正确的方法，因为它返回一个修改后的数组。

【解决方案2】：

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>
                })
}

【讨论】：

【解决方案3】：

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

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>;

【讨论】：