React组件Props未传递：50×50网格渲染为竖排问题

我无法理解为何组件的prop值未被应用，具体为row、column和pix参数。预期渲染出50×50的网格，但实际所有元素呈竖排显示。

相关组件代码 #

Board Component #

import '../App.css'

export default function Board({ row, column, pix, children }) {
  return (
    <div style={{
      display: 'grid',
      gridTemplateColumns: `repeat(${{ column }}, ${{ pix }}px)`,
      gridTemplateRows: `repeat(${{ row }}, ${{ pix }}px)`,
    }}>
      {children}
    </div>
  )
}

Game Component #

import Cell from './Components/Cell'
import Board from './Components/Board'
import { useState } from 'react'
import './App.css'

export default function Game({ row, column, pix }) {
const boardDimensions = {
width: 50,
height: 50
}

const array2D = Array(boardDimensions.height).fill().map((row) => Array(boardDimensions.width).fill(0))
const [fiboCells, setFiboCells] = useState(array2D)

return (
<div className="center">
<Board row={row} column={column} pix={pix}>
{
fiboCells.map((row, i) => row.map((col, j) => (
<Cell
value={col}
rowIndex={i}
colIndex={j}
colour="red"
/>
)))
}
</Board>
</div>
)
}

App Component #

import './App.css';
import Game from './Game'

function App() {
  return (
    <Game row={50} column={50} pix={25}/>
  );
}

export default App;

问题原因及修复方案 #

1. Board组件模板字符串语法错误 #

你在gridTemplateColumns和gridTemplateRows中使用了${{ column }}的双重大括号写法，这会错误地将column解析为对象属性访问，而非直接引用prop值。正确写法是直接使用${column}。

修正后的Board组件：

import '../App.css'

export default function Board({ row, column, pix, children }) {
  return (
    <div style={{
      display: 'grid',
      gridTemplateColumns: `repeat(${column}, ${pix}px)`,
      gridTemplateRows: `repeat(${row}, ${pix}px)`,
    }}>
      {children}
    </div>
  )
}

2. Game组件生成的Cell列表为嵌套数组 #

fiboCells.map(...).map(...)返回的是二维数组（每行对应一个Cell数组），React渲染时会将嵌套数组视为多个子元素组，导致Grid布局无法正确识别行列结构，最终元素竖排。需要将二维数组扁平化为一维数组。

同时，React列表渲染要求每个子元素带有唯一key属性，避免性能警告。

修正后的Game组件Cell渲染部分：

<Board row={row} column={column} pix={pix}>
  {fiboCells.flatMap((row, i) => 
    row.map((col, j) => (
      <Cell
        key={`${i}-${j}`}
        value={col}
        rowIndex={i}
        colIndex={j}
        colour="red"
      />
    ))
  )}
</Board>

也可以用Array.prototype.flat()实现扁平化：

<Board row={row} column={column} pix={pix}>
  {fiboCells.map((row, i) => 
    row.map((col, j) => (
      <Cell
        key={`${i}-${j}`}
        value={col}
        rowIndex={i}
        colIndex={j}
        colour="red"
      />
    ))
  ).flat()}
</Board>

3. 可选优化：复用传入的props定义网格尺寸 #

Game组件中硬编码了boardDimensions为50×50，可直接使用传入的row和column props，提升组件灵活性：

const array2D = Array(row).fill().map(() => Array(column).fill(0))

总结 #

• 修复Board组件模板字符串语法错误，正确引用props值
• 扁平化Cell列表，确保Grid容器接收扁平的子元素数组
• 为每个Cell添加唯一key，符合React列表渲染规范
• 可选：使用传入的props定义网格尺寸，提升组件复用性

内容的提问来源于stack exchange，提问作者Alex Vasconcelos de Almeida