React-Grid-Layout 简介

React-Grid-Layout 是一个用于创建灵活、可拖拽的网格布局的 React 库。它可以轻松地创建响应式布局，并允许用户自定义网格的大小、位置和排列。

主要特点:

• 可拖拽: 用户可以拖动和调整网格元素的大小和位置。
• 响应式: 布局会自动调整以适应不同屏幕尺寸。
• 灵活: 可以轻松自定义网格的大小、行数和列数。
• 可扩展: 可以轻松添加新功能和自定义组件。

使用场景:

• 仪表板和管理面板
• 电子商务网站的商品展示
• 应用程序的布局设计
• 内容编辑器

示例代码:

import React, { useState } from 'react';
import GridLayout from 'react-grid-layout';

const App = () => {
  const [layout, setLayout] = useState([ 
    { i: 'a', x: 0, y: 0, w: 1, h: 2 }, 
    { i: 'b', x: 1, y: 0, w: 3, h: 2 }, 
    { i: 'c', x: 4, y: 0, w: 1, h: 2 }, 
  ]);

  const onLayoutChange = (newLayout) => setLayout(newLayout);

  return (
    <GridLayout layout={layout} onLayoutChange={onLayoutChange}>
      <div key="a" style={{ backgroundColor: 'lightblue' }}>A</div>
      <div key="b" style={{ backgroundColor: 'lightgreen' }}>B</div>
      <div key="c" style={{ backgroundColor: 'lightpink' }}>C</div>
    </GridLayout>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

更多信息:

• 官方文档: https://github.com/STRML/react-grid-layout
• 示例: https://react-grid-layout.com/