javascript - 从 2 个特定元素创建网格

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 个项目，您可能会执行以下操作:

generateLayout() {
    return {{x:0,y:0,w:6,h:12},{x:6,y:0,w:6,h:12}};
}