使用re-resizable时onResize每次仅增1-2像素的问题求助

问题核心是错误理解了resize回调参数的含义：你代码里的w.width不是本次调整的像素增量，而是调整后的最终宽度值。你用width + w.width相当于把当前状态宽度和最终宽度相加，导致状态更新逻辑混乱，表现为每次仅增减1-2像素。

修正方案 #

直接使用回调返回的最终宽度值更新状态，无需和当前width相加：

1. 修正回调函数 #

function onResize(event: any, e: any, ref: any, w: any) {
  // w.width 是调整后的最终宽度，直接赋值给状态
  setWidth(w.width);
};

2. 统一组件尺寸绑定 #

确保Resizable的size属性和内部div的宽高完全匹配，避免样式冲突：

<Resizable 
  size={{ width: width, height: 55 }} // 和内部div高度统一
  onResizeStop={onResize}
>
  <div 
    id={id} 
    style={{ width: width, height: 55 }} 
    className="box-border whitespace-pre-wrap break-words leading-[1.5px] absolute z-5 bg-white border-[#d9d9d9] border-[2px] p-3 m-2.5 flex justify-center rounded-[10px]"
  >
    <div className="flex flex-col w-[88%] mr-[25px]">
      {nameElement}
    </div>
  </div>
</Resizable>

补充说明 #

如果需要获取本次调整的像素增量，可以用w.width - width计算，但不推荐依赖当前状态值做增量计算——因为React状态更新是异步的，当前width可能不是最新值，直接使用回调返回的最终宽度是最可靠的方式。

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