すべての 'X'リアクションコンポーネントの後に要素を挿入する

Question

私は、ブートストラップのcol col-md-4スタイルを使用してアイテムのリストを3つの列にレンダリングするReactコンポーネントを持っています。しかし、要素の次の行が正しい場所に確実に表示されるように、3番目の要素の後に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クラスでのdivをレンダリング：

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

私の現在の回避策は渡すことです

私の現在のレンダリングコードは次のようになりますItemのインデックスを小道具として使用し、インデックスが3の倍数である場合はItemにclearfixクラスを適用しますが、これは私にとっては少しハッキングしていると思いますが、別のdivを使用して、必要なビューポートサイズでclearfixを表示できるようにしました（ブートストラップのvisible-*クラスを使用）。

この問題を解決するには、私が思いついたよりもエレガントな方法が必要であると確信しています。どんな提案も感謝しています。

Answer 1

あなたの配列を反復処理し、<div/>すべての3つの項目を追加できます。

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

を