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

请教以下这段代码用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;
      };
阅读 55.2k
7 个回答
render() {
    return (
      <div>
        {this.state.comments.map((comment) => (
          <Comment comment={comment} key={comment.id} />
        ))}
      </div>
    );
  }
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>;
});

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

不要把react当成模板

用es5的 forEach方法

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

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

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

然后在render的jsx中

{ collection.map(mapper)}

才发现fb

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>
);
  };
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏