本文详解如何使用 react 构建 19×19 交错双色棋盘（如国际象棋/围棋变体），重点解决颜色逻辑错误、坐标映射偏差及可维护性问题，并支持黑白皇后按奇偶行列规则限制移动区域。
本文详解如何使用 react 构建 19×19 交错双色棋盘（如国际象棋/围棋变体），重点解决颜色逻辑错误、坐标映射偏差及可维护性问题，并支持黑白皇后按奇偶行列规则限制移动区域。
在 React 中实现一个符合特定棋子移动约束的网格（例如：黑皇后仅能位于行列索引同为偶数或同为奇数的格子——即“白格”，白皇后仅能位于行列索引一奇一偶的格子——即“灰格”），关键在于正确建模格子背景色与坐标奇偶性的数学关系，而非简单拼接条件判断。
? 常见错误：错误的奇偶组合逻辑
原始代码中使用了：
const colorClassName = row % 2 === 1 || col % 2 === 1 ? "red" : "green";
该逻辑实际将「任意一行或一列为奇数」的格子全设为 "red"，导致约 75% 的格子被染红（仅 row%2===0 && col%2===0 时为 green），完全无法形成标准的交错棋盘（checkerboard pattern）。
✅ 正确的判定应基于 行列奇偶性是否一致：
const colorClassName = row % 2 === col % 2 ? "light-cell" : "dark-cell";
- 当 row % 2 === col % 2（同为 0 或同为 1）→ light-cell（对应黑皇后可落位区域）
- 否则 → dark-cell（对应白皇后可落位区域）
? 推荐实现：嵌套循环 + 语义化结构
相比单层循环配合 Math.floor(i / 19) 计算行列，嵌套循环更直观、易读且便于后续扩展（如添加棋子状态、事件委托优化等）：
import React, { useState, useEffect } from 'react';
function Board() {
const [gridCells, setGridCells] = useState<JSX.Element[]>([]);
const handleClick = (row: number, col: number) => {
console.log(`Cell clicked: (${row}, ${col})`);
// ✅ 此处可结合棋子规则校验合法性：
// - 黑皇后：仅允许 (row % 2 === col % 2)
// - 白皇后：仅允许 (row % 2 !== col % 2)
};
useEffect(() => {
const newGridCells: JSX.Element[] = [];
const SIZE = 19;
for (let row = 0; row < SIZE; row++) {
for (let col = 0; col < SIZE; col++) {
const isLight = row % 2 === col % 2;
const cellClass = isLight ? "grid-cell light-cell" : "grid-cell dark-cell";
newGridCells.push(
<div
key={`${row}-${col}`} // ✅ 更健壮的 key（避免纯数字冲突）
data-row={row}
data-col={col}
className={cellClass}
onClick={() => handleClick(row, col)}
role="gridcell"
aria-label={`Cell at row ${row}, column ${col}`}
/>
);
}
}
setGridCells(newGridCells);
}, []);
return (
<div
id="GridContainer"
className="colored-grid"
role="grid"
aria-label="19x19 alternating chessboard grid"
style={{ display: 'grid', gridTemplateColumns: `repeat(${19}, 1fr)` }}
>
{gridCells}
</div>
);
}
export default Board;? CSS 样式建议（配套）
.colored-grid {
width: fit-content;
margin: 1rem auto;
border: 2px solid #333;
}
.grid-cell {
width: 24px;
height: 24px;
box-sizing: border-box;
}
.light-cell {
background-color: #f8f8f8; /* 白格：黑皇后合法位 */
}
.dark-cell {
background-color: #555; /* 灰格：白皇后合法位 */
}
/* 可选：悬停反馈 */
.grid-cell:hover {
opacity: 0.8;
transform: scale(1.05);
}⚠️ 注意事项与进阶提示
- Key 的可靠性：避免使用纯数字 key={i}（易引发重渲染异常），推荐 key={${row}-${col}`或key={row * 19 + col}`。
- 无障碍支持：添加 role="grid" / role="gridcell" 和 aria-label，提升可访问性。
- 性能优化：若后续需高频更新（如动画、拖拽），建议改用 useMemo 缓存 gridCells，或采用虚拟滚动（react-window）处理超大网格。
-
棋子逻辑集成：可在 handleClick 中加入规则判断：
const isValidForBlackQueen = (r: number, c: number) => r % 2 === c % 2; const isValidForWhiteQueen = (r: number, c: number) => r % 2 !== c % 2;
通过以上重构，你将获得一个语义清晰、逻辑正确、可扩展性强且符合 WCAG 标准的 React 棋盘组件——既是视觉上的交错网格，更是游戏规则落地的可靠基础。
