react-grid-layout 使用说明

在前端工作中，经常遇到自定义dashboard页这样的需求。其中，dashboard页可以理解为一个自定义面板，用户可以在面板上自由的拖拽，新增，删除组件。组件可以是各种echarts图形，也可是各种数据表格。通过各个组件的拖拽组合，从而让用户自定义需要的dashboard页。

react-grid-layout

一个支持自由拖拽的布局组件
react-grid-layout 地址：https://www.npmjs.com/package/react-grid-layout

安装

yarn add react-grid-layout

在使用时需要引入必要的样式文件
/node_modules/react-grid-layout/css/styles.css
/node_modules/react-resizable/css/styles.css

基础用法

import GridLayout from "react-grid-layout";

class MyResponsiveGrid extends React.Component {
  render() {
  	// 布局属性
	const layout = [
      {i: 'a', x: 0, y: 0, w: 1, h: 2, static: true},
      {i: 'b', x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4},
      {i: 'c', x: 4, y: 0, w: 1, h: 2}
    ];
    return (
      <GridLayout
        className="layout"
        layouts={layouts}
        cols={12}
        rowHeight={30}
        width={1200}
      >
        <div key="a">1</div>
        <div key="b">2</div>
        <div key="c">3</div>
      </GridLayout>
    );
  }
}

处理上面这种在Layout组件上设置布局属性的方式，还可以直接在子元素上设置：

import GridLayout from "react-grid-layout";

class MyResponsiveGrid extends React.Component {
  render() {
    return (
      <GridLayout
        className="layout"
        cols={12}
        rowHeight={30}
        width={1200}
      >
        <div key="a" data-grid="{{x: 0, y: 0, w: 1, h: 2, static: true}}">1</div>
        <div key="b" data-grid="{{x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4}}">2</div>
        <div key="c" data-grid="{{x: 4, y: 0, w: 1, h: 2}}">3</div>
      </GridLayout>
    );
  }
}

响应式用法

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

class MyResponsiveGrid extends React.Component {
  render() {
    // {lg: layout1, md: layout2, ...}
    const layouts = getLayoutsFromSomewhere();
    return (
      <ResponsiveGridLayout className="layout" layouts={layouts}
        breakpoints={{lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0}}
        cols={{lg: 12, md: 10, sm: 6, xs: 4, xxs: 2}}>
        <div key="1">1</div>
        <div key="2">2</div>
        <div key="3">3</div>
      </ResponsiveGridLayout>
    )
  }
}

参数说明：

• breakpoints ，设置分割点
• cols ，设置相应宽度下的总格数
• layout ，配置相应宽度下的布局

结合 WidthProvider

使用 WidthProvider 可以在初始化和窗口大小调整事件时自动确定宽度。

import { Responsive, WidthProvider } from "react-grid-layout";

const ResponsiveGridLayout = WidthProvider(Responsive);

class MyResponsiveGrid extends React.Component {
  render() {
    // {lg: layout1, md: layout2, ...}
    var layouts = getLayoutsFromSomewhere();
    return (
      <ResponsiveGridLayout
        className="layout"
        layouts={layouts}
        breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
        cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
      >
        <div key="1">1</div>
        <div key="2">2</div>
        <div key="3">3</div>
      </ResponsiveGridLayout>
    );
  }
}

GridLayout Props说明

• width，设置宽度，使用 WidthProvider 时，此属性将失效。
• autoResize，为true时，容器的高度会自适应内容的高度
• cols，布局列数
• draggableCancel，取消拖动时被拖动项的类选择器的名称
• draggableHandle，拖动时被拖动项的类选择器的名称
• compactType，紧凑排列类型
• layout，布局
• margin，项与项之间的间距，单位是px
• containerPadding，项的内边距
• rowHeight，行高（项的默认高度，设置拖拽设置项的高度时，高度会是这个的倍数）
• droppingItem，放置元素的配置（放置元素即是当你拖动某一项时出现的虚拟元素）
• isDraggable，是否可拖拽
• isResizable，是否可重置大小
• isBounded，是否设置边界
• useCSSTransforms，是否使用CSS 3 的translate() 来代替 position left/top（可加快渲染速度）
• transformScale，若ResponsiveReactGridLayout 或者 ReactGridLayout的父组件具有"transform: scale(n)"这一css属性，应该设置这一比例系数以避免拖拽时出现“伪影”
• allowOverlap，
• preventCollision，为真时，项在拖动时不会变更位置
• isDroppable，为真时，设置了draggable={true}属性的项可以被放置入其他项
• resizeHandles，设置重置大小的图标出现的位置，默认是在右下角
• resizeHandle，自定义重置大小组件（即默认出现在右下角的那个小图标，可自定义）
• onLayoutChange，布局发生变化的回调函数
• onDragStart，某一项开始拖动的回调函数
• onDrag，某一项拖动中的回调函数
• onDragStop，某一项停止拖动的回调函数
• onResizeStart，某一项开始重置大小的回调函数
• onResize，某一项正在重置大小中的回调函数
• onResizeStop，某一项停止重置大小的回调函数
• onDrop，某一项所包含的内容中被放置其他元素后的回调函数
• onDropDragOver，某一项被拖拽到container外面时的回调

Responsive Props说明

• breakpoints ，设置响应式布局的分割点
• cols ，设置不同区间内的布局列数
• margin ，项与项之间边距的设置
• containerPadding ，项的内边距的设置
• layouts ，布局
• onBreakpointChange ，breakpoint发生变更时的回调函数
• onLayoutChange ，布局发生变化的回调函数
• onWidthChange ，container宽度发生变化的回调函数