react-grid-layout如何设置固定步长调整组件尺寸

完全可以实现拖动调整手柄时按固定步长增减尺寸，以下是具体实现方法：

两种实现思路 #

• 方案1：通过网格基础配置直接对齐步长
  你可以将rowHeight参数设置为你需要的步长值（比如50px），同时调整容器总宽度和cols列数，让单个网格的宽度刚好等于步长值，此时组件默认会按网格单位调整尺寸，无需额外逻辑就能实现每次调整增减50px的效果
• 方案2：通过resize事件自定义修正步长
  如果你的布局不需要对齐网格，可以监听onResize回调事件，在每次尺寸变化时按你设定的步长做取整修正，再更新到布局配置中即可

核心代码示例 #

import React, { useState } from 'react';
import GridLayout from 'react-grid-layout';
import 'react-grid-layout/css/styles.css';
import 'react-resizable/css/styles.css';

const FixedStepGrid = () => {
  // 初始布局配置
  const [layout, setLayout] = useState([
    {i: 'item1', x: 0, y: 0, w: 2, h: 2},
    {i: 'item2', x: 2, y: 0, w: 2, h: 2},
  ]);
  // 固定调整步长
  const FIXED_STEP = 50;
  // 网格行高和单格宽度，和步长保持一致
  const GRID_CELL_SIZE = 50;
  // 总列数按容器宽度自行调整，这里假设容器宽度1000px，总列数20，单格宽度刚好50px
  const TOTAL_COLS = 20;

  const handleResize = (_, oldItem, newItem) => {
    // 可选：如果有特殊步长要求，可在此处额外修正宽高
    const correctedW = Math.round(newItem.w * GRID_CELL_SIZE / FIXED_STEP) * FIXED_STEP / GRID_CELL_SIZE;
    const correctedH = Math.round(newItem.h * GRID_CELL_SIZE / FIXED_STEP) * FIXED_STEP / GRID_CELL_SIZE;
    newItem.w = correctedW;
    newItem.h = correctedH;
    setLayout([...layout]);
  };

  return (
    <GridLayout
      className="grid-container"
      layout={layout}
      cols={TOTAL_COLS}
      rowHeight={GRID_CELL_SIZE}
      width={1000}
      onResize={handleResize}
    >
      <div key="item1">组件1</div>
      <div key="item2">组件2</div>
    </GridLayout>
  );
};

export default FixedStepGrid;

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