我想在 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 个 div 水平放置在 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> 
    ) 
  } 
});