React项目动态调整网格盒子尺寸不生效该如何解决？

问题核心原因 #

• JS计算逻辑错误：var [height, width] = ${100/numberOfBoxes}%`` 是对单个字符串做字符拆分，最终height和width拿到的是字符串前两位字符，完全不是你需要的宽高数值。
• 样式完全脱节：CSS里硬编码了.square的flex-basis: calc(25% - 10px)，相当于固定每行渲染4个盒子，和你JS计算的数值没有任何关联，所以不管numOfBoxes怎么调整，视觉效果都不会变。
• 布局方案不适配：flex换行布局做规则网格的精度低，边框、边距都会额外占用空间，很容易出现溢出，且渲染上万个节点时性能极差，完全无法支撑百万级的渲染需求。

调整方案 #

第一步：修正宽高计算逻辑

网格是二维布局，不能直接用总数量除以100%，需要先计算行列数，保证网格刚好铺满整个容器：

const numOfBoxes = 1000 // 可动态调整的总盒子数
// 对总数量开平方后向上取整，得到需要的行列数，保证总格子数≥你需要的数量
const gridCount = Math.ceil(Math.sqrt(numOfBoxes))

第二步：改用CSS Grid做网格布局，动态绑定行列参数

Grid布局天生适配规则网格场景，不用给每个盒子单独设置宽高，直接在容器层控制行列即可，性能远高于flex换行布局：

#root {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden; /* 避免出现滚动条影响尺寸计算 */
}

.square-container {
  width: 100%;
  height: 100%;
  display: grid;
  /* 通过JS传入的CSS变量控制行列数，平均分配容器空间 */
  grid-template-columns: repeat(var(--grid-count), 1fr);
  grid-template-rows: repeat(var(--grid-count), 1fr);
  gap: 0; /* 如果不需要盒子间隙直接设为0，有间隙需求的话计算行列数时要同步扣除间隙总宽度 */
}

.square {
  border: 1px solid #000;
  box-sizing: border-box;
  aspect-ratio: 1/1; /* 直接保证盒子是正方形，不需要额外写before伪元素 */
}

第三步：React中动态绑定CSS变量

在容器元素上把计算出来的行列数传入CSS变量即可：

<div className="square-container" style={{ '--grid-count': gridCount }}>
  {/* 盒子渲染逻辑 */}
</div>

百万级渲染优化提示 #

不要直接渲染全部百万个DOM节点，浏览器会直接因为内存占用过高卡死，改用虚拟滚动方案，只渲染可视区域内的盒子即可，非可视区域的节点用空白占位替代。

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