使React组件在边框拖动时可缩放

.resizeable-component {
  resize: both;
  overflow: auto;
}

import React, { useState } from 'react';

const ResizeableComponent = () => {
  const [width, setWidth] = useState(200);
  const [height, setHeight] = useState(200);

  const handleMouseDown = (e) => {
    e.preventDefault();
    document.addEventListener('mousemove', handleMouseMove);
    document.addEventListener('mouseup', handleMouseUp);
  };

  const handleMouseMove = (e) => {
    setWidth(e.clientX);
    setHeight(e.clientY);
  };

  const handleMouseUp = () => {
    document.removeEventListener('mousemove', handleMouseMove);
    document.removeEventListener('mouseup', handleMouseUp);
  };

  return (
    <div
      className="resizeable-component"
      style={{ width: `${width}px`, height: `${height}px` }}
      onMouseDown={handleMouseDown}
    >
      {/* 组件内容 */}
    </div>
  );
};

export default ResizeableComponent;