ReactJS+JSX如何带条件格式化迭代渲染数组（每3条生成row）

问题背景 #

• 使用下方示例代码时出现「unexpected token」错误
• 移除getRemainder调用后HTML渲染正常
• 尝试将return index % divisor改为return 1仍出现相同错误

示例JSX代码 #

const cars = ['Saab', 'Volvo', 'BMW', 'Toyota', 'Honda', 'Subaru']

export default function App() {
    const getRemainder = function (index, divisor) {
        return index % divisor
    }

    return (
        <>
            <div className="container-fluid">
                {cars.map((x, index) => (
                    {getRemainder(index, 3) == 0 && <div className='row'>}
                    <h4>
                        car: {x} | index: {index}
                    </h4>
                    {getRemainder(index, 3) == 2 && </div>}
                ))}
            </div>
        </>
    )
}

期望渲染的HTML结构 #

<div class="container-fluid">
    <div class="row">
        <div class="col">Saab</div>
        <div class="col">Volvo</div>
        <div class="col">BMW</div>
    </div>
    <div class="row">
        <div class="col">Toyota</div>
        <div class="col">Honda</div>
        <div class="col">Subaru</div>
    </div>
</div>

解决方案 #

你的代码报错核心原因是：JSX不允许单独渲染未闭合的标签（比如单独的<div className='row'>）或单独的闭合标签（比如</div>），JSX要求每个渲染单元必须是完整的DOM元素或组件。

正确的做法是先将原数组按每3个元素分组，再遍历分组后的数组渲染对应的row和col：

const cars = ['Saab', 'Volvo', 'BMW', 'Toyota', 'Honda', 'Subaru']

// 数组分组函数：将数组按指定大小拆分
const chunkArray = (arr, size) => {
    const chunks = []
    for (let i = 0; i < arr.length; i += size) {
        chunks.push(arr.slice(i, i + size))
    }
    return chunks
}

export default function App() {
    const carGroups = chunkArray(cars, 3)

    return (
        <>
            <div className="container-fluid">
                {carGroups.map((group, groupIndex) => (
                    <div key={groupIndex} className='row'>
                        {group.map((car, index) => (
                            <div key={index} className='col'>
                                {car}
                            </div>
                        ))}
                    </div>
                ))}
            </div>
        </>
    )
}

代码说明 #

1. 数组分组：通过chunkArray函数把原cars数组拆分成每3个元素一组的二维数组，比如[['Saab','Volvo','BMW'], ['Toyota','Honda','Subaru']]
2. 渲染分组：外层遍历分组后的数组，每个组对应一个<div className='row'>
3. 渲染元素：内层遍历每个组里的汽车元素，渲染成<div className='col'>

这样就能完美生成你期望的HTML结构，同时避免JSX语法错误。

内容的提问来源于stack exchange，提问作者mrjayviper