什么是 @oledm/react-grid-layout？
@oledm/react-grid-layout 是基于 React 的一个组件库，它提供了一个能够创建可拖拽、可缩放、可调整大小的网格布局的组件。
如何使用 @oledm/react-grid-layout？
安装
安装 @oledm/react-grid-layout 的命令如下：
npm install @oledm/react-grid-layout --save
引入
import ReactGridLayout from '@oledm/react-grid-layout';
使用
以下是一个简单的使用示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ --------------- ---- ---------------------------
------ -----------------------------------
------ ---------------------------------
----- ----------- - -- -- -
----- ------ - -
- -- ---- -- -- -- -- -- -- -- -- ------- ---- --
- -- ---- -- -- -- -- -- -- -- -- ----- -- ----- - --
- -- ---- -- -- -- -- -- -- -- - -
--
------ -
---------------- ------------------ --------------- --------- -------------- -------------
---- -----------------
---- -----------------
---- -----------------
------------------
--
--
------ ------- ------------这个示例中，我们创建了一个 layout 数组对象，其中包含了三个单元的配置项。然后我们将它作为 ReactGridLayout 的 prop，同时还传递了 cols、rowHeight 和 width。
最后，我们在 ReactGridLayout 内部渲染了三个 <div>，并在 key 属性中分别设置了它们的键名。
当你运行这段代码后，你会看到三个不同大小的区块出现，你可以尝试拖拽、缩放它们，就像以下视频演示一样：
<iframe></iframe>配置项
有很多可配置的项可以设置，这里是一份基本的选项列表：
-- -------------------- ---- ------- - ---------- --------- ------ ------------ -------- ---------- --- ----- --- ------ ----- ------- ---- ---- ----------------- ---- ---- ---------- ------ ------------ ----- ------------ ----- ---------------- ----- ----------------- ----- --------------- -- --------------- ---------------- --- ------------ -------------- --- ------- -------------- --- ----------- -------------- --- -------------- -------------- --- --------- -------------- --- ------------- -------------- --- -------------- --------------- ------- ----- ---------- -- -
上面的每个选项都有默认值，你也可以指定你自己的选择项来覆盖它。在选择项中比较重要的几个属性是：
rowHeight：每行的高度，默认为 150；cols：行中的网格数量，默认为12；width：格子布局的宽度，默认为当前视口的window.innerWidth；margin：网格布局之间的边距，默认为[10, 10]；isDraggable：网格布局是否可以拖动，默认为true；isResizable：网格布局是否可以缩放大小，默认为true；
总结
@oledm/react-grid-layout 是基于 React 的一个组件库，它提供了一个能够创建可拖拽、可缩放、可调整大小的网格布局的组件。如果你需要实现可自由布局的网页界面，那么这个库可能非常适合你。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600555a181e8991b448d2bf8