如何圍繞使用React.js

Question

類每X元素

我只是喜歡做的事情如下：

<div class="container"> 
    <div class="row"> 
    <div class="col-md-4">content</div> 
    <div class="col-md-4">content</div> 
    <div class="col-md-4">content</div> 
    </div> 
    <div class="row"> 
    <div class="col-md-4">content</div> 
    <div class="col-md-4">content</div> 
    <div class="col-md-4">content</div> 
    </div> 

    <!-- etc ... --> 

</div> 

例如，每隔3 .col-md-4's被包裹在一個.row

我已經嘗試過：

rows.push(<div className="row">); 

    for (var count = 0; count < 9; count++) { 

     rows.push(<!-- content -->); 

     // Add closing and reopening divs every 3 elements 
     if (count % 3 === 0) { 
      rows.push(</div><div className="row">); 
     } 
    } 

    rows.push(</div>); 
} 

這不幸的是不起作用。

此外3和9只是這裏的例子，我想知道是否有一個通用的方法。

Answer 1

你不應該串連就像一個元素字符串，但創建和撰寫反應元素。你可以先用生成的內容元素的數組，然後將其降低到組，並與您的容器包裝：

render() { 
    var content = [ 
     "content 1", "content 2", "content 3", "content 4", "content 5", 
     "content 6", "content 7", "content 8", "content 9", "content 10" 
    ]; 
    var groupSize = 3; 
    var rows = content.map(function(content) { 
     // map content to html elements 
     return <div className="col-md-4">{content}</div>; 
    }).reduce(function(r, element, index) { 
     // create element groups with size 3, result looks like: 
     // [[elem1, elem2, elem3], [elem4, elem5, elem6], ...] 
     index % groupSize === 0 && r.push([]); 
     r[r.length - 1].push(element); 
     return r; 
    }, []).map(function(rowContent) { 
     // surround every group with 'row' 
     return <div className="row">{rowContent}</div>; 
    }); 
    return <div className="container">{rows}</div>; 
} 

Answer 2

你不能把剛剛打開/關閉的陣列內的標籤，收集您的列的陣列，並將它們全部輸出內接一個，用有效的開始和結束標記：

rows.push(<div className="row">{columns}</div>); 

Answer 3

如果您已經使用lodash，你可能會感興趣的chunk功能：

render: function() { 
    var rows = [<div className="col-md-4">content</div>, ...] 

    return _.chunk(rows, 3).map(function(group) { 
     return <div className="row">{group}</div> 
    }); 
}