Jak otoczyć co elementy xz klasy przy użyciu React.js

Question

ja po prostu zrobić coś jak następuje:

<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> 

przykład co 3 .col-md-4's zapakowane jest w .row

I” ve tried:

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

To niestety nie działa.

Ponadto 3 i 9 to tylko przykłady tutaj i zastanawiałem się, czy istnieje ogólne podejście.

Answer 1

Nie należy łączyć elementy niczym ciąg, ale twórz i komponuj elementy reagujące. Można wygenerować tablicę swojego elementów z treści pierwszego, następnie zmniejszyć je do grup i owinąć z pojemnikiem:

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

nie można umieścić tylko otwieranie/zamykanie tagów wewnątrz tablic, zbierać kolumn wewnątrz tablicy i wyjście je wszystkie jednym z ważnych otwierających i zamykających znaczników:

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

Answer 3

Jeśli używasz już lodash, może być zainteresowany w chunk funkcję:

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

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