实际上我在 li 中迭代数组时遇到问题。
我有下面的数组结构
var xyz = [{'name': ['abc','xyz','test','test1','test2','test3','test4'] }];
我想要下面的输出结构
<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>
我在我的项目中使用 React 和 underscore.js。
我想要纯 react 函数中的所有内容 我试图将 li 作为字符串附加到 ul 中,但这是不好的做法 react.js
任何人都可以帮助我。
我使用下面的函数创建了数组结构,它将在一个数组对象中包含 3 个值。
var n = 3;
var chunkedlists = _.chain(this.state.serialIdFilter).groupBy(function(element, index){
return Math.floor(index/n);
}).toArray().value();
现在我需要帮助将其打印成正确的结构,正如我提到的使用 react + underscore.js。
最佳答案
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"));
示例 bin 可以在这里找到: http://jsbin.com/menidu/4/edit?js,output
关于javascript - 创建 html 结构,每个 li 中只允许 3 个 div 元素。在 React + underscore.js 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38057727/