基于索引添加标签构建3列网格的React语法问题求助

你遇到的问题核心在于JSX不允许拆分渲染开始标签和结束标签——React的JSX是基于完整React元素的，你不能在一个条件里输出<div>的开头，又在另一个条件里输出它的结尾，这种拆分写法会被解析器判定为无效语法，这就是你看到"Parsing error"和"expression expected"的原因。

正确的解决方案：先分组再渲染 #

更好的思路是先把你的items数组拆分成每3个元素一组的子数组，然后遍历这些分组，每个分组对应一个grid-container，再在容器内部渲染组内的UniversityCard。这样既符合JSX语法，逻辑也更清晰。

步骤1：编写数组分组工具函数

先写一个简单的函数，把原数组按指定大小拆分：

const chunkArray = (arr, size) => {
  const chunks = [];
  for (let i = 0; i < arr.length; i += size) {
    chunks.push(arr.slice(i, i + size));
  }
  return chunks;
};

步骤2：在组件中使用分组后的数组渲染

// 先把items分成每3个一组
const groupedItems = chunkArray(items, 3);

return (
  <div>
    {groupedItems.map((group, groupIndex) => (
      <div key={groupIndex} className="grid-container">
        {group.map((row, itemIndex) => (
          <UniversityCard key={itemIndex} data={row} />
        ))}
      </div>
    ))}
  </div>
);

为什么你的原写法不行？ #

你最初尝试的：

{items.map((row, i) => ( 
  {i % 3 === 0 && <div className={'grid-container'}>} 
  <UniversityCard data={row} /> 
  {i % 3 === 2 && </div>} 
))}

以及修改后的三元表达式写法，本质都是在尝试拆分标签的开始和结束。JSX解析时会把每个条件分支的内容当作独立的React元素，而单独的<div>开头或者</div>结尾都不是有效的React元素，自然会抛出语法错误。

额外提示：关于key的使用 #

上面的示例中用了groupIndex和itemIndex作为key，但如果你的row有唯一标识（比如id），最好用row.id代替itemIndex，用分组内第一个元素的id作为groupIndex的替代，这样能提升React渲染的性能，避免不必要的重渲染。

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