Javascript 将组中的数组项作为单独的JSX元素呈现

我有一个数组，比如arr chapters=[“C1”、“C2”、“C3，….“C10”、“C11”]和11个章节标题。我试图在

中将这些内容呈现为每个

中最多5个项目的组。例如：

<ul>
    <li>C1</li>
    <li>C2</li>
    <li>C3</li>
    <li>C4</li>
    <li>C5</li>
</ul>
<ul>
    <li>C6</li>
    <li>C7</li>
    <li>C8</li>
    <li>C9</li>
    <li>C10</li>
</ul>
<ul>
    <li>C11</li>
</ul>

C1
C2
C3
C4
碳五


C6
C7
C8
C9
C10


C11

我已将数组对象传递给我的组件，但我很难想出如何实现条件渲染部分。这是（更大的）渲染函数中的一部分：

<ul>
{data.chapters && data.chapters.map((chapter,index) => (
    <li>{chapter}</li>
    //??How to conditionally add </ul><ul> here to start grouping them into 5 items
))}
</ul>

{data.chapters&&data.chapters.map（（章，索引）=>(
{第章}
//？如何在此处有条件地添加
，以将其分组为5项
))}

我正在考虑使用索引值来帮助我识别项目编号，并有条件地呈现一个关闭标签，以关闭和打开一个新的标签

---

我也在想，也许我应该将逻辑放在render（）之外，并将项目预排序为5个数组，然后在这里进行渲染。

返回基于索引的标记

对于组中的第一个元素返回

，对于最后一个元素返回

<ul>
{data.chapters && data.chapters.map((chapter,index) => {
    if(index%5===1) return <ul><li>{chapter}</li>
    else if(index%5===0 || index+1===data.chapters.length) return <li>{chapter}</li></ul>
    else return <li>{chapter}</li>
})}
</ul>

{data.chapters&&data.chapters.map（（章，索引）=>{
if（索引%5==1）返回
{chapter}
else if（索引%5==0 | |索引+1==data.chapters.length）返回
{chapter}
否则返回
{chapter}
})}

试试这个：

{data.chapters && data.chapters.map((chapter,index) => {
    return (index+1) % 5 === 0 && <ul><li>{chapter}</li></ul>
})}

{data.chapters&&data.chapters.map（（章，索引）=>{
返回（索引+1）%5==0&&
{li>{chapter}
})}

试试这个：

    const courses = ["C1", "C2", "C3", "C4", "C5", "C6", "C7", "C8", "C9", "C10", "C11"];
    const getItems = function() {
        const lists = [];
        let listItems = [];
        for(let loopIndex = 0; loopIndex < courses.length; loopIndex++) {
            const nextIndex = (loopIndex + 1);
            listItems.push(<li>{ courses[loopIndex] }</li>);
            if(((nextIndex % 5) === 0) || nextIndex === courses.length) {
                lists.push(<ul>{ listItems }</ul>);
                listItems = [];
            }
        }
        return lists;
    };

从“React”导入React；
导入“./card.css”；
从“lodash”进口；
类。组件{
状态={
chunk:u.chunk（[1,2,3,4,5,6,7,8,9,10,11]，5）
}
render（）{
返回(
{this.state.chunk.map（（部分，索引）=>{
返回

组-{index}
{part.map（（ch，i）=>{
返回
{ch}
})}

})}
)
}
}
导出默认章节；

问题是创建

的动态迭代，正如上面的人在问题中所描述的那样

所以我使用了lodashchunk函数，它将返回二维数组

const chunks=[[1,2,3,4,5]、[6,7,8,9,10]、[11]；

块[0]=

块[0]=

---

块[0]=

您好，这是一个很好的答案。如果您能添加一些解释，说明为什么您的代码与他们之前尝试的代码相比能够工作，那么可能会更有帮助。谢谢Chris，我已经添加了comments@ChrisAlexander：虽然上面的答案实现了我在中演示的非常相同的方法，但我不认为引入整个l仅针对单个项目的图书馆（可能）走出工具箱是一个好主意，尤其是当所需的功能很容易用一行代码填充时。因此，如果我不确定用户是否已经使用了通常由问题下的适当标记指示的库，我通常不建议包含另一个库。我试过了，但它不会执行else if条件n作为js代码。它简单地将其作为文本输出到浏览器中。

<ul>
{data.chapters && data.chapters.map((chapter,index) => {
    if(index%5===1) return <ul><li>{chapter}</li>
    else if(index%5===0 || index+1===data.chapters.length) return <li>{chapter}</li></ul>
    else return <li>{chapter}</li>
})}
</ul>

import React from 'react';
import './card.css';
import _ from 'lodash';
class Chapters extends React.Component {
    state = {
        chunk: _.chunk([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11], 5)
    }

    render() {
        return (
            <div>
                {this.state.chunk.map((part, index) => {
                    return <ul>
                        Group - {index}
                        {part.map((ch, i) => {
                            return <li>{ch}</li>
                        })}
                    </ul>
                })}
            </div>
        )
    }
}

export default Chapters;