Use For loop inside JSX

This question already has an answer here:

Loop inside React JSX 38 answers

---

Use a map so you're actually returning the elements. A foreach doesn't return anything. Your use of && was also invalid.

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

Note that I added a key property - for react to optimise rendering of an array of elements each item should have a unique key (that isn't just the numeric index).

---

而不是使用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>;

---

The forEach does not return anything. You wont see any results out of it. Instead you could use .map eg

 {
     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/52044.html

上一篇: 创建一个包含1 ... N的JavaScript数组

下一篇: 在JSX中使用For循环