从 2 个特定元素创建网格

Create grid from 2 specific elements

本文关键字：元素 创建 网格      更新时间：2023-09-26

我正在尝试使用React-Grid-Layout（https://github.com/STRML/react-grid-layout）创建一个网格结构。

我查看了此处描述的基本示例：

https://github.com/STRML/react-grid-layout/blob/master/test/examples/1-basic.jsx

在此示例中，布局是使用 this.props 创建的，如下所示：

  generateLayout() {
    var p = this.props;
    return _.map(new Array(p.items), function(item, i) {
      var y = _.result(p, 'y') || Math.ceil(Math.random() * 4) + 1;
      return {x: i * 2 % 12, y: Math.floor(i / 6) * y, w: 2, h: y, i: i};
    });
  },

但是，我不想在网格中显示this.props元素。实际上，我只想在网格中放置2个组件：

<Comp1/>
<Comp2/>

如何为这两个生成布局，以便将它们放置在网格中？

React 网格布局采用一个包含带有键 - x，y，w，h 的对象的对象。

因此，对于网格中具有 12 列和 12 行的 2 个项目，您可以执行以下操作：

generateLayout() {
    return {{x:0,y:0,w:6,h:12},{x:6,y:0,w:6,h:12}};
}
相关文章：