JSX内联条件渲染能否省略闭合标签？需每3个方块插入指定div

问题 #

是否可以使用不带闭合标签的JSX内联条件渲染？需求为每3个方块插入<div className="board-row">。

提供的代码如下：

const gridSquares = squares.map((reference, square) => {
  return (
    <React.Fragment>
      {square % 3 == 0 && square % 3 !== squares.length && (
        <div className="board-row">
      )}
      <Square
        key={square}
        value={squares[square]}
        onSquareClick={() => handleClick(square)}
      />
    </React.Fragment>
  );
});

return (
  <div>
    <div className="status">{status}</div>
    {gridSquares}
  </div>
);

运行后出现语法错误：

./src/App.js
Syntax error: C:/Code/Tutorial/src/App.js: Expected corresponding JSX closing tag for <div> (57:4)

  55 |       <Square key={square} value={squares[square]} onSquareClick={() => handleClick(square)} />
  56 | 
> 57 |     </React.Fragment>
     |     ^
  58 |     
  59 |   });

解决方案 #

不行，JSX强制要求所有标签必须闭合，单独渲染开标签会破坏语法结构，导致编译器无法找到对应的闭合标签，直接抛出语法错误。

要实现每3个方块包裹在board-row容器里，正确思路是先将squares数组按3个元素一组拆分，再嵌套渲染分组后的内容：

方法一：循环拆分数组 #

// 拆分数组为每3个元素一组
const groupedSquares = [];
for (let i = 0; i < squares.length; i += 3) {
  groupedSquares.push(squares.slice(i, i + 3));
}

// 渲染分组内容
const gridSquares = groupedSquares.map((row, rowIndex) => (
  <div key={rowIndex} className="board-row">
    {row.map((value, squareIndex) => {
      const actualIndex = rowIndex * 3 + squareIndex;
      return (
        <Square
          key={actualIndex}
          value={value}
          onSquareClick={() => handleClick(actualIndex)}
        />
      );
    })}
  </div>
));

return (
  <div>
    <div className="status">{status}</div>
    {gridSquares}
  </div>
);

方法二：简洁数组方法拆分 #

// 用Array.from快速分组
const groupedSquares = Array.from({ length: Math.ceil(squares.length / 3) }, (_, i) =>
  squares.slice(i * 3, i * 3 + 3)
);

// 渲染分组内容
const gridSquares = groupedSquares.map((row, rowIdx) => (
  <div className="board-row" key={rowIdx}>
    {row.map((val, colIdx) => {
      const idx = rowIdx * 3 + colIdx;
      return <Square key={idx} value={val} onSquareClick={() => handleClick(idx)} />;
    })}
  </div>
));

return (
  <div>
    <div className="status">{status}</div>
    {gridSquares}
  </div>
);

这样既保证了JSX语法的正确性，又完美实现了每3个方块一组的布局需求。

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