javascript - 如何创建在每个 li 中只允许 3 个 div 元素的 html 结构。在 React + underscore.js 中

Question

为了创建这个结构，我只想使用 underscore.js 方法。我有下面的数组。

 var xyz = [{
    'name': 'test'
 },{
    'name': 'test1'
 },{        
    'name': 'test2'
 },{ 
    'name': 'test3'
 },{ 
    'name': 'test4'
 },{
    'name': 'test5'

}];

HTML 结构应该像这样创建 -

<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 和 underscore.js。

Answer 1

一个纯 React 函数的示例(它也可以是一个组件)，您可以执行如下操作:

    <span>
        {_.map(_.chunk(xyz, 3), (innerItem, i) => (
            <ul key={i}>
                {_.map(innerItem, ({name}, j) => (<li key={j}>{name}</li>))}
            </ul>
        ))}
    </span>