react实现元素拉伸

实现元素拉伸的基本方法

使用CSS的resize属性配合overflow实现基础拉伸

.resizable {
  resize: both;
  overflow: hidden;
  border: 1px solid #ccc;
  min-width: 100px;
  min-height: 100px;
}

在React组件中应用：

function ResizableBox() {
  return <div className="resizable">拖拽右下角调整大小</div>;
}

使用自定义钩子实现更灵活的拉伸

创建useResizable钩子处理拉伸逻辑：

function useResizable(initialSize = { width: 200, height: 200 }) {
  const [size, setSize] = useState(initialSize);
  const [isResizing, setIsResizing] = useState(false);
  const [startPos, setStartPos] = useState({ x: 0, y: 0 });

  const startResize = (e) => {
    setIsResizing(true);
    setStartPos({ x: e.clientX, y: e.clientY });
  };

  const doResize = (e) => {
    if (!isResizing) return;
    setSize(prev => ({
      width: prev.width + (e.clientX - startPos.x),
      height: prev.height + (e.clientY - startPos.y)
    }));
    setStartPos({ x: e.clientX, y: e.clientY });
  };

  const stopResize = () => setIsResizing(false);

  return { size, isResizing, startResize, doResize, stopResize };
}

实现边界限制的拉伸组件

创建带边界检查的拉伸组件：

function BoundedResizable({ minWidth = 50, minHeight = 50 }) {
  const { size, startResize, doResize, stopResize } = useResizable();

  useEffect(() => {
    document.addEventListener('mousemove', doResize);
    document.addEventListener('mouseup', stopResize);
    return () => {
      document.removeEventListener('mousemove', doResize);
      document.removeEventListener('mouseup', stopResize);
    };
  }, [doResize, stopResize]);

  return (
    <div 
      style={{ 
        width: Math.max(size.width, minWidth),
        height: Math.max(size.height, minHeight),
        border: '1px solid #333',
        position: 'relative'
      }}
    >
      <div 
        style={{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '10px',
          height: '10px',
          backgroundColor: '#333',
          cursor: 'nwse-resize'
        }}
        onMouseDown={startResize}
      />
    </div>
  );
}

实现多方向拉伸控制

扩展钩子支持多方向拉伸：

function useMultiDirectionResize() {
  const [size, setSize] = useState({ width: 200, height: 200 });
  const [resizeParams, setResizeParams] = useState(null);

  const startResize = (e, direction) => {
    setResizeParams({
      direction,
      startX: e.clientX,
      startY: e.clientY,
      startWidth: size.width,
      startHeight: size.height
    });
  };

  const doResize = (e) => {
    if (!resizeParams) return;

    const { direction, startX, startY, startWidth, startHeight } = resizeParams;
    const deltaX = e.clientX - startX;
    const deltaY = e.clientY - startY;

    setSize(prev => {
      const newSize = { ...prev };
      if (direction.includes('right')) newSize.width = startWidth + deltaX;
      if (direction.includes('left')) newSize.width = startWidth - deltaX;
      if (direction.includes('bottom')) newSize.height = startHeight + deltaY;
      if (direction.includes('top')) newSize.height = startHeight - deltaY;
      return newSize;
    });
  };

  const stopResize = () => setResizeParams(null);

  return { size, startResize, doResize, stopResize };
}

使用第三方库简化实现

安装react-resizable库：

npm install react-resizable

基本使用示例：

import { Resizable } from 'react-resizable';

function ResizableComponent() {
  const [size, setSize] = useState({ width: 200, height: 200 });

  const onResize = (event, { size }) => {
    setSize(size);
  };

  return (
    <Resizable
      height={size.height}
      width={size.width}
      onResize={onResize}
      resizeHandles={['se', 'sw', 'ne', 'nw', 's', 'n', 'e', 'w']}
    >
      <div style={{ 
        width: size.width + 'px', 
        height: size.height + 'px',
        border: '1px solid #ddd'
      }}>
        可多方向拉伸的内容
      </div>
    </Resizable>
  );
}