将组内的数组项呈现为单独的 JSX 元素

Question

我有一个数组，说 arr chapters = ["C1", "C2", "C3,...."C10", "C11"] 有 11 个章节标题。我正在尝试在 <ul> 中呈现这些作为每个 <ul> 中最多 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>

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

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

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

我也在想，也许我应该将逻辑放在 render() 之外，并将项目预排序为 5 个数组，然后在此处渲染它们。

Answer 1

根据索引返回标签。

组中的第一个元素返回<ul>，最后一个元素返回</ul>

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

Answer 2

试试这个：

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

Answer 3

试试这个：

    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;
    };

然后你在render 内部调用getItems：

render() {
    return (<>{ getItems() }</>);
}

Answer 4

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; 

问题是创建<ul> </ul>的动态迭代。正如问题中描述的上述人。

所以我使用了 lodash chunk 函数，它将返回二维数组 const chunks = [[1,2,3,4,5], [6,7,8,9,10], [11]];

块[0] = <ul> </ul> 块[0] = <ul> </ul> 块[0] = <ul> </ul>