Question

我有一个数组，说arr章= [“ C1”，“ C2”，“ C3，....” C10“，” C11“]]有11个章标题。 }}作为每个<ul>中最多5个项目的组。因此，例如：

<ul>

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

<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>标签。

我也在想，也许我应该将逻辑放在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;
    };

然后您在getItems内部调用render：

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>

将组内的数组项渲染为单独的JSX元素

4 个答案: