本文详解 React 中因模板字符串误用导致 props 未生效的常见问题，重点修复 gridTemplateColumns 和 gridTemplateRows 中错误的 ${{ prop }} 写法，并提供可运行的调试方法与最佳实践。
本文详解 react 中因模板字符串误用导致 props 未生效的常见问题，重点修复 `gridtemplatecolumns` 和 `gridtemplaterows` 中错误的 `${{ prop }}` 写法，并提供可运行的调试方法与最佳实践。
在 React 开发中，一个看似“props 没传进来”的问题，往往并非数据传递失败，而是值在使用环节被错误解析。你遇到的网格布局失效（50×50 单列堆叠）正是典型示例：Board 组件确实接收到了 row、column 和 pix，但因 CSS 样式字符串构造错误，导致浏览器无法解析 gridTemplateColumns，最终退化为默认块级流布局。
根本原因在于这一行代码：
gridTemplateColumns: `repeat(${{ column }}, ${{ pix }}px)`,
此处 ${{ column }} 并非解构或取值，而是创建了一个新对象 { column: column }，再将其隐式转为字符串 "[object Object]"。同理，${{ pix }} 也变成 "[object Object]"。因此实际生成的 CSS 是：
grid-template-columns: repeat([object Object], [object Object]px);
这完全非法，浏览器直接忽略该声明，display: grid 失去行列定义，子元素自然垂直堆叠。
✅ 正确写法是直接插值变量本身，无需额外花括号：
import '../App.css';
export default function Board({ row, column, pix, children }) {
return (
<div style="{{" display: gridtemplatecolumns: gridtemplaterows: gap gap:>
{children}
</div>
);
}
? 调试建议：验证 props 是否真正到达组件？
在 Board 组件开头加入日志，快速确认数据流是否通畅：
export default function Board({ row, column, pix, children }) {
console.log('Board props:', { row, column, pix }); // ? 立即验证
// ...其余逻辑
}
若控制台输出 row: 50, column: 50, pix: 25，即可排除父组件传值问题，将排查焦点精准锁定在样式构造逻辑上。
⚠️ 补充注意事项：
- Array.fill().map() 创建二维数组时需注意引用陷阱（当前 array2D 实现安全，因 fill(0) 填充的是原始值）；
- 若 pix 为非数字类型（如字符串 "25"），建议在 style 中统一转换：${Number(pix)}px，增强健壮性；
- 生产环境推荐将动态 grid 样式提取为 CSS 类 + CSS 变量（:root { --grid-col: 50; --grid-pix: 25px; }），兼顾性能与可维护性。
通过本次修正，你的 Game 组件将渲染出符合预期的 50×50 网格画布——每个单元格宽高均为 25px，整齐排列，为后续细胞自动机等交互逻辑奠定可靠基础。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
