如何在JSX中每行分组4个Col？修复代码解析错误

错误原因 #

你遇到的解析错误是因为JSX不允许单独拆分并渲染闭合标签，</Row>不是合法的JSX元素，React无法识别这种单独的闭合标签语法。你试图拆分<Row>的开始和结束标签分别push到数组的写法不符合JSX规则。

两种可行的修复方案 #

方案1：先分组再渲染（手动控制Row） #

先把selectedSnapShotList分割成每4个元素一组的子数组，然后每组对应一个<Row>，在Row内部渲染该组的所有<Col>：

import { Col, Container, Row } from "react-bootstrap";
import { useTrafficSnapShot } from "./useTrafficSnapShot";

export default function TrafficSnapShot() {
    const [error, isLoading, selectedSnapShotList, searchSnapShot] = useTrafficSnapShot();

    // 把数组分成每4个一组
    const groupedList = [];
    for (let i = 0; i < selectedSnapShotList.length; i += 4) {
        groupedList.push(selectedSnapShotList.slice(i, i + 4));
    }

    return (
        <div>
            {!isLoading && (
                <Container fluid>
                    <Row><Col>Traffic Snap Shot</Col></Row>
                    <Row>
                        <Col><input onChange={e => searchSnapShot(e.target.value)} required type="text" /></Col>
                    </Row>
                    {/* 渲染分组后的列表 */}
                    {groupedList.map((group, groupIndex) => (
                        <Row key={groupIndex}>
                            {group.map((snapShot, index) => (
                                <Col key={index}><div>{snapShot.location}</div></Col>
                            ))}
                        </Row>
                    ))}
                </Container>
            )}
        </div>
    )
}

方案2：利用Bootstrap栅格系统自动换行（更简洁） #

React-Bootstrap的<Col>支持通过栅格属性控制宽度，直接给每个Col设置md={3}（因为Bootstrap栅格是12列，12/3=4，中等屏幕及以上每行显示4个），所有Col放在同一个<Row>里，Bootstrap会自动处理换行：

import { Col, Container, Row } from "react-bootstrap";
import { useTrafficSnapShot } from "./useTrafficSnapShot";

export default function TrafficSnapShot() {
    const [error, isLoading, selectedSnapShotList, searchSnapShot] = useTrafficSnapShot();

    return (
        <div>
            {!isLoading && (
                <Container fluid>
                    <Row><Col>Traffic Snap Shot</Col></Row>
                    <Row>
                        <Col><input onChange={e => searchSnapShot(e.target.value)} required type="text" /></Col>
                    </Row>
                    <Row>
                        {selectedSnapShotList.map((snapShot, index) => (
                            <Col key={index} md={3} sm={6} xs={12}>
                                <div>{snapShot.location}</div>
                            </Col>
                        ))}
                    </Row>
                </Container>
            )}
        </div>
    )
}

这里md={3}表示在屏幕宽度≥768px时，每个Col占3列（每行4个）；sm={6}表示在小屏幕（≥576px）时每行显示2个；xs={12}表示超小屏幕下每行显示1个，兼顾了响应式布局。

额外注意点 #

• 给循环渲染的元素加上唯一的key属性，避免React警告。
• 解构赋值时建议用const代替let，因为这些变量不会重新赋值。

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