如何用re-resizable实现仅右侧单边拖拽调整尺寸？

要实现右侧拖拽仅向右扩展、左侧位置固定的效果，直接调整你代码里的Resizable组件配置即可：

1. 仅启用右侧拖拽手柄 #

在Resizable上添加handles属性，明确只开启右侧手柄，避免触发其他方向的拖拽：

<Resizable
  handles={{ right: true }}
  // 保留你原有的style、size等配置
>
  <div className="box">拖拽右侧调整宽度</div>
</Resizable>

2. 锁定左侧位置，仅更新宽度 #

默认拖拽右侧时，组件可能会同时调整元素位置和宽度，因此需要手动控制状态固定left值：
首先在组件内添加状态管理位置与尺寸：

const [boxState, setBoxState] = useState({
  left: 50, // 你的初始左侧位置
  top: 50,
  width: 200,
  height: 200
});

然后给Resizable绑定样式和拖拽回调：

<Resizable
  style={{
    position: "absolute",
    left: boxState.left,
    top: boxState.top
  }}
  size={{ width: boxState.width, height: boxState.height }}
  handles={{ right: true }}
  onResize={(e, dir, ref, delta) => {
    // 仅更新宽度，left保持初始值不变
    setBoxState(prev => ({
      ...prev,
      width: prev.width + delta.width
    }));
  }}
>
  <div className="box">拖拽右侧调整宽度</div>
</Resizable>

关键注意点 #

• 必须给元素设置position: absolute或relative，否则left属性无法生效
• 手动锁定left是确保位置固定最可靠的方式，不要依赖组件自动调整逻辑

修改完成后，拖拽右侧手柄时，元素只会向右扩展，左侧会牢牢固定在初始位置，完全符合需求。

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