如何使用ReactJS与Bootstrap栅格系统创建动态行列

基础实现（每行一个Col） #

先确认你已从react-bootstrap导入所需组件：

import { Container, Row, Col } from 'react-bootstrap';

假设你的数据数组如下：

const data = [
  { something: '内容1' },
  { something: '内容2' },
  { something: '内容3' },
  { something: '内容4' }
];

在组件的JSX中直接渲染：

<Container>
  <Container>
    {data.map((item, index) => (
      <Row key={index}>
        <Col md={3}>{item.something}</Col>
      </Row>
    ))}
  </Container>
</Container>

注意：必须添加key属性，这里用数组索引是临时方案，生产环境建议使用数据中唯一的标识（比如item.id）。

符合Bootstrap栅格的优化实现（每行多列） #

如果想让每行显示4个Col（md={3}对应Bootstrap 12列栅格，12/3=4），可以先对数据分组再渲染：

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

const groupedData = chunkArray(data, 4);

再渲染分组后的数组：

<Container>
  <Container>
    {groupedData.map((rowItems, rowIndex) => (
      <Row key={rowIndex}>
        {rowItems.map((item, colIndex) => (
          <Col md={3} key={item.id || colIndex}>
            {item.something}
          </Col>
        ))}
      </Row>
    ))}
  </Container>
</Container>

这样就能实现和静态示例类似的多列布局效果，同时适配Bootstrap的栅格规则。

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