各liに3つのdiv要素しか許さないhtml構造を作成します。 React + underscore.js

Question

これはHow to create html structure which will allow only 3 div elements in each li. In React + underscore.jsのビットコピーです

実際に私はliの配列を反復している間に問題に直面しています。

私は配列構造の下

var xyz = [{'name': ['abc','xyz','test','test1','test2','test3','test4'] }]; 

を持っていると私は私が私のプロジェクトに反応し、underscore.js使用していた出力構造の下

<ul> 
<li> 
    <div><span>test3</span></div> 
    <div><span>test4</span></div> 
    <div><span>test5</span></div> 
</li> 
<li> 
    <div><span>test6</span></div> 
    <div><span>test7</span></div> 
    <div><span>test8</span></div> 
</li> 

をしたいです。 私は純粋な反応関数のすべてを欲しい私は文字列としてulに李を追加しようとしましたが、それは悪い練習ですreact.js 誰もこれで私を助けることができます。

以下の関数を使用して、1つの配列オブジェクトに3つの値を含む配列構造を作成しました。

var n = 3; 
    var chunkedlists = _.chain(this.state.serialIdFilter).groupBy(function(element, index){ 
     return Math.floor(index/n); 
    }).toArray().value(); 

私はreact + underscore.jsを使用して説明したようにこれを適切な構造に印刷するのに役立ちます。このような

Answer 1

const Com =() => { 
    var xyz = [{'name': ['abc','xyz','test','test1','test2','test3','test4'] }]; 

    return (
     <ul> 
      {_.map(_.chunk(xyz[0].name, 3), (innerItem, i) => (
       <li key={i}> 
        {_.map(innerItem, (name, j) => (<div key={j}><span>{name}</span></div>))} 
       </li> 
      ))} 
     </ul> 
    ); 

} 

ReactDOM.render(<Com />, document.getElementById("container")); 

を必要とされるであろう： http://jsbin.com/menidu/4/edit?js,output

Answer 2

何かがここで見つけることの例ビン

return ( <ul>{chunkedLists.map(group => <li>{group.map(i => <div><span>{i}</span></div>)}</ul>)} )