React中使用二维map方法替代for循环实现国际象棋棋盘渲染

修改后完整代码 #

import React from 'react'
import './styles/Board.css'
import Tile from './Tile'

const Board = () => {
  const boardY = [1, 2, 3, 4, 5, 6, 7, 8]
  const boardX = ['a','b','c','d','e','f','g','h']

  return (
    <div className="board">
      {
        // 外层遍历X轴，flatMap自动扁平化内层返回的Tile数组
        boardX.flatMap((x, xIndex) => {
          // 对齐原有倒序遍历Y轴的逻辑，slice是为了不修改原boardY数组
          const reversedY = boardY.slice().reverse()
          return reversedY.map((y, yIndex) => {
            const pos = x + String(y)
            return <Tile key={pos} color={(xIndex + yIndex) % 2 === 0 ? "dark" : "light"} pos={pos} />
          })
        })
      }
    </div>
  )
}

export default Board

改动说明 #

• 移除了命令式的printBoard函数和手动维护的board数组，改用React推荐的声明式写法，直接在JSX中通过数组方法生成所需元素
• 外层使用flatMap遍历X轴数组，自动将内层map返回的Tile数组合并为一维数组，和原有循环push的结构完全一致，不会改变最终的DOM结构
• 遍历Y轴前通过slice().reverse()生成倒序的Y数组，完全对齐原有从后往前遍历Y的逻辑，棋盘的行列顺序、格子颜色、坐标标记和原效果100%一致
• 所有Tile组件的props逻辑和原有代码完全相同，无需修改Tile组件的任何实现

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