React中带props的网格如何设置16-100的尺寸范围限制

数据老陈

2026-9-27

问题根因

你的问题完全出在输入触发逻辑部分，有4个明显的逻辑漏洞：

prompt返回值是字符串类型，直接和数字做大小比较存在隐式类型转换风险，输入非数字内容时判断逻辑会完全失效
边界判断逻辑错误：要求最小16、最大100，原判断写的是gridSize < 100 && gridSize > 16，直接把16、100两个合法边界值排除在外
二次输入未做校验：else分支弹出提示后第二次获取用户输入，没有做任何范围校验就直接赋值，这就是超出范围的数值也能生效的核心原因
变量重复声明：else分支内再次用const gridSize声明同名变量，属于语法不规范，容易引发作用域异常

网格组件的代码没有问题，不需要修改，只要替换输入触发逻辑的代码即可。

修复后代码

let gridSize = prompt("请输入网格尺寸");
// 循环校验，直到输入合法或用户主动取消
while (gridSize !== null) {
  // 把输入转成十进制整数，过滤非数字内容
  const sizeNum = parseInt(gridSize, 10);
  // 校验是否为有效数字且在合法区间内
  if (!isNaN(sizeNum) && sizeNum >= 16 && sizeNum <= 100) {
    setGridSize(sizeNum);
    const newPixelData = initPixelData(sizeNum, INIT_BG_COLOUR);
    break;
  } else {
    alert("请输入16-100之间的整数");
    gridSize = prompt("请输入网格尺寸");
  }
}