react 的react-resizable组件，实现可拖动的变动大小的效果

上网找遍的办法，也没找到能否实现需求的。最后自己填填补补，实现了需求

const ResizableBox = () => {
  const [allWidth, setAllWidth] = React.useState(800);
  const [width, setWidth] = React.useState(500);
  const [width2, setWidth2] = React.useState(200);

  const onResize = (event, { size }) => {
    console.log("size.width = ",size.width);
    console.log("size.height = ",size.height);
    const widthIndex = allWidth - size.width
    setWidth(size.width);
    setWidth2(widthIndex)
  };

  return (
    <>
      <div  style={{display: 'flex',width: `${allWidth}px`}}>
        <Resizable
          width={width}
          onResize={onResize}
          draggableOpts={{ grid: [25, 25] }} // 可选项，用于设置拖动的网格大小
        >
          <div style={{ width: `${width}px`, border: '1px solid #ccc' }}>
            Resizable Box
          </div>
        </Resizable>
        <Resizable
          width={width2}
          onResize={onResize}
          draggableOpts={{ grid: [25, 25] }} // 可选项，用于设置拖动的网格大小
        >
          <div style={{ width: `${width2}px`, border: '1px solid #bbb' }}>
            Resizable Box
          </div>
        </Resizable>
      </div>
      
    </>
  );
};

const MyComponent = () => {
  return (
    <div className="app">
      <ResizableBox />
    </div>
  );
};

　效果：