reactjs - 使用React.js在JSX中从for循环创建HTML

我想在JSX中的for循环中创建HTML。这是我尝试的样子

    function renderTemplates(templates){
           var html = [];
           var templateDiv = [];
           var count  = 0;
           for(var identifier in templates){
             if(templates.hasOwnProperty(identifier)){
               var templateDetails = templates[identifier];
               if(count == 0){
                  html.push(<Row>);
               }
               cols = <Col md={6}>ff
                          </Col>;
               html.push(cols);
               if(count == 0){
                      html.push(</Row>);
               }
               count = (count === 1)?0:1;
             }
        }
        return html;
     }

我知道这是错误的语法，但无法弄清楚该怎么做。基本上我有一些数据，并且想要以2格位于1行水平的方式创建html。

最佳答案

在recent project上，我执行了类似的操作，但是使用了表行/列。

var TableBody = React.createClass({
  render: function(){
    var columns = this.props.columns;
    var data = this.props.data;

    return (
      <tbody>
        {data.map(function(item, idx){
          return <TableRow key={idx} data={item} columns={columns}/>;
        })}
      </tbody>
    )
  }
});

我的<TableRow />组件如下所示:

var TableRow = React.createClass({
  render: function() {
    var columns = this.props.columns;
    var data = this.props.data;
    var td = function(item) {

        return columns.map(function(c, i) {
          return <td key={i}>{item[c]}</td>;
        }, this);
      }.bind(this);

    return (
      <tr key={data}>{ td(data) }</tr>
    )
  }
});

关于reactjs - 使用React.js在JSX中从for循环创建HTML，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28694349/