如何在react.js 中利用for循环之类的输出html

Question

请教以下这段代码用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;
      };

Answer 1

render() {
    return (
      <div>
        {this.state.comments.map((comment) => (
          <Comment comment={comment} key={comment.id} />
        ))}
      </div>
    );
  }

Answer 2

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

Answer 3

最近刚学react的东西，还没看懂。

Answer 4

不要把react当成模板

Answer 5

用es5的 forEach方法

var arr = [...];
arr.forEach(function(value, index, array) {
    ...
})

Answer 6

在jsx中使用collection.map就好
可以在component内部定义一个或者外部传入一个mapper函数

const mapper = (item) => { return (
  <MyItem>{item.name}</MyItem>
)}

然后在render的jsx中

{ collection.map(mapper)}

才发现fb

Answer 7

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