如何创建html结构，每个li只允许3个div元素。在React + underscore.js中 [英] How to create html structure which will allow only 3 div elements in each li. In React + underscore.js

问题描述

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

For creating this structure i want to use only underscore.js methods. I have below array .

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

}];

HTML结构应该像这样创建 -

And HTML structure should create like this -

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

I am using React and underscore.js on my project.

推荐答案

一个纯React函数的例子（它也可能是一个组件），你可以做类似下面的事情：

An example of a pure React function (it could also be a component), you could do something like the following:

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

这篇关于如何创建html结构，每个li只允许3个div元素。在React + underscore.js中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！