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

Question

这是

的位副本

实际上我在 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。我想要纯反应函数中的所有内容我试图将 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。

Answer 1

需要这样的东西

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

Answer 2

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

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

Create html structure which will allow only 3 div elements in each li. In React + underscore.js

javascript

underscore.js

reactjs