React-Grid-Layout

React-Grid-Layout 是一个基于网格布局的 React 组件库，提供了一个类似于网格系统的接口，用于在网页上动态放置和排列组件。它支持拖拽和调整组件大小，使得用户界面更加直观和交互性强。

安装：npm install react-grid-layout

主题

• React-Grid-Layout onLayoutChange

基本使用

引入 ReactGridLayout 组件，并配置基本属性。每个子元素都是一个网格项，具有唯一的 key 和网格位置 data-grid 的属性：

import ReactGridLayout from 'react-grid-layout';

function MyFirstGrid() {
  return (
    <ReactGridLayout className="layout" cols={12} rowHeight={30} width={1200}>
      <div key="a" data-grid={{x: 0, y: 0, w: 1, h: 2, static: true}}>A</div>
      <div key="b" data-grid={{x: 1, y: 0, w: 3, h: 2}}>B</div>
      <div key="c" data-grid={{x: 4, y: 0, w: 1, h: 2}}>C</div>
    </ReactGridLayout>
  );
}

元素属性

• x：横坐标
• y：纵坐标
• w：宽度
• h：高度
• minW：最小宽度
• maxW：最大宽度

拖拽和缩放

React-Grid-Layout 支持拖拽和缩放组件。isDraggable 和 isResizable 属性可以用来控制这些行为：

<ReactGridLayout isDraggable={true} isResizable={true}>
  {/* components */}
</ReactGridLayout>

响应式布局

使用 ResponsiveGridLayout 组件可以实现响应式布局，根据不同屏幕大小调整布局配置：

import { Responsive as ResponsiveGridLayout } from 'react-grid-layout';

function MyResponsiveGrid() {
  const layouts = {
    lg: [{i: 'a', x: 0, y: 0, w: 1, h: 2}],
    md: [{i: 'a', x: 0, y: 0, w: 2, h: 3}],
    sm: [{i: 'a', x: 0, y: 0, w: 3, h: 4}]
  };

  return (
    <ResponsiveGridLayout className="layout" layouts={layouts}
                          breakpoints={{lg: 1200, md: 996, sm: 768}}
                          cols={{lg: 12, md: 10, sm: 6}}>
      <div key="a">A</div>
    </ResponsiveGridLayout>
  );
}

事件处理

可以监听各种事件，例如拖拽开始、拖拽结束等，从而在用户交互时执行相应的逻辑：

function handleDragStart(layout, oldItem, newItem, placeholder, e, element) {
  console.log("Drag started");
}

function handleDragStop(layout, oldItem, newItem, placeholder, e, element) {
  console.log("Drag stopped");
}

<ReactGridLayout onDragStart={handleDragStart} onDragStop={handleDragStop}>
  {/* components */}
</ReactGridLayout>

本文作者：Maeiee

本文链接：React-Grid-Layout

版权声明：如无特别声明，本文即为原创文章，版权归 Maeiee 所有，未经允许不得转载！

喜欢我文章的朋友请随缘打赏，鼓励我创作更多更好的作品！