在每個'X'後面插入一個元素React組件

Question

我有一個React組件，它使用Bootstrap的col col-md-4樣式將項目列表呈現爲三列。但是，每第三個元素後我需要insert a clearfix div以確保下一個「行」元素顯示在正確的位置。

我當前的渲染代碼如下所示：

render() { 
    var resultsRender = $.map(this.state.searchResults, function (item) { 
    return <Item Name={ item.Name } Attributes={ item.Attributes } />; 
    } 

    return (
    <div>{ resultsRender }</div> 
); 
} 

Item只是呈現與col類股利，包含傳入的內容：

render() { 
    return(
    <div className='col col-md-4'> 
     ...content here... 
    </div> 
); 
} 

我目前的解決方法是通過索引Item作爲prop，然後將clearfix類應用到Item，如果索引是3的倍數，但是這對我來說會感覺有些ha and，我寧願單獨使用div允許我僅在所需的視口大小上顯示clearfix（使用Bootstrap的visible-*類）。

我敢肯定，我必須有一個更優雅的方式來解決這個問題，而不是我提出的問題。任何建議表示讚賞。

Answer 1

你可以重複你的陣列，並添加每3項<div/>：

render() { 
    var items = $.map(this.state.searchResults, function (item) { 
    return <Item Name={ item.Name } Attributes={ item.Attributes } />; 
    } 

    var resultsRender = []; 
    for (var i = 0; i < items.length; i++) { 
    resultsRender.push(items[i]); 
    if (i % 3 === 2) { 
     resultsRender.push(<div className="clearfix" />); 
    } 
    } 

    return (
    <div>{ resultsRender }</div> 
); 
}