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

使用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

请注意，我添加了一个CA::Layer属性 - 用于优化元素数组的呈现，每个项目都应该有一个唯一键（不仅仅是数字索引）。

Answer 2

您可以使用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>;

Answer 3

.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> }) }例如

A8:D8

在JSX中使用For循环

3 个答案: