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

IT技术 javascript jquery reactjs underscore.js
2022-07-20 02:02:23

为了创建这个结构，我只想使用 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。

3个回答

一个纯 React 函数的示例（它也可以是一个组件），您可以执行以下操作：

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

尝试这个：

$(document).ready(function(){
  var xyz = [{'name':'test'},{'name':'test1'},{'name':'test2'},{'name':'test3'},{'name':'test4'},{'name':'test5'}];

  var htmlStr = "<ul><li>";
  var cnt = 0;
  $(xyz).each(function(i,v) {
    if(cnt != 0 && cnt % 3 == 0) {
      htmlStr += "</li><li>";
    }
    htmlStr += "<div><span>"+v.name+"</span></div>";
    cnt++;
  });
  htmlStr += "</li></ul>";
  $("#test").html(htmlStr)
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="test"></div>

您可以将数组拆分为块并使用下划线 _.template 方法来创建 html：

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

var chunkedXyz = _.chain(xyz).groupBy(function(element, index){
  return Math.floor(index/3);
}).toArray().value();

var liTemplate = _.template("<% _.each(liElements, function(liContent) { %> <div><span><%= liContent.name %></span></div> <% }); %>");
var ulTemplate = _.template("<% _.each(chunkedXyz, function(liItem) { %> <li><%= liTemplate({liElements: liItem}) %></li> <% }); %>");

var layout = "<ul>" + ulTemplate({
    chunkedXyz: chunkedXyz,
    liTemplate: liTemplate
}) + "</ul>";

console.log(layout.toString());

https://jsfiddle.net/1m5ayhzw/

其它你可能感兴趣的问题
上一篇警告：列表中的每个孩子都应该有一个唯一的“key”props 下一篇类型错误：CryptoJS 未定义