Question

我正在尝试使用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/>

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

Answer 1

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

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

{{1}}

从2个特定元素创建网格

1 个答案: