请教以下这段代码用jsx 怎么写,主要是处理不好for 循环部分.
// 界面的拆分--------------------------------------------------------------------------------------------------
getRowDraw : function() {
var str = "";
str = "<div class=\"horizontal-line-container\"><div class=\"horizontal-line-container2\">";
for (var i = 0; i < 24; i++) {
str += "<div style='height:"+(this.hourHeight-1)+"' class=\"horizontal-line\"><div style='height:"+(this.hourHeight/2-1)+"' ></div></div>";
}
str += "</div></div>";
return str;
};
在jsx中使用collection.map就好
可以在component
内部定义一个或者外部传入一个mapper函数
const mapper = (item) => { return (
<MyItem>{item.name}</MyItem>
)}
然后在render的jsx中
{ collection.map(mapper)}
才发现fb
用es5的 forEach方法
var arr = [...];
arr.forEach(function(value, index, array) {
...
})
不要把react当成模板
getRowDraw : function() {
return (
<div className="horizontal-line-container">
<div className="horizontal-line-container2">
for (var i = 0; i < 24; i++) {
<div style={height:this.hourHeight-1} className="horizontal-line">
<div style={height:this.hourHeight/2-1}></div>
</div>
}
</div></div>
);
};
最近刚学react的东西,还没看懂。
var doms = [];
for (var i = 0; i < 24; i++) {
doms.push(<a>{i}</a>);
}
return doms;
我一般结合 underscore.js 的 map 方法:
return _.map(persons, function (p) {
return <div>{p.name} | {p.age}</div>;
});