使用 react-grid-layout 以编程方式生成网格项

Question

我正在使用 Meteor 和 ReactJS 开发应用程序。我正在使用 react-grid-layout 组件来创建项目网格。

问题是需要手动指定每个元素的位置。在我的应用程序中，我基于 Meteor 集合生成网格项，我可能不知道集合中有多少项。

例子

import React from "react";
import Item from "/ui/components/workspace/item.jsx";
import ReactGridLayout from 'react-grid-layout';

export default class WorkspaceGrid extends React.Component {
  componentDidMount() {

  }

  render() {
    let testCollection = [1,2,3,4,5,6,7,8,9,10]
    return (
      <ReactGridLayout isResizable={false} className="layout" cols={4} width={1200}>
        {testCollection.map((item, x) => 
            <Item key={x} _grid={{x: ?, y: ?, w: 1, h: 2}} />
        )}
      </ReactGridLayout>
    )
  }

}

在上面的示例中，网格每行应有 4 列，但我将如何指定 x 和 y 值，以便在 testCollection 中的项目 1-4 是在第 1 行中，5-8 在第 2 行中，9-10 在第 3 行中，依此类推，无论集合中有多少项目。

非常感谢，感谢帮助。

Answer 1

默认情况下，react-grid-layout 的参数 verticalCompact 设置为 true，这意味着如果多个项目获得相同的 y 值，它将垂直压缩。我认为你可以写：

<Item key={x} _grid={{x: x%4, y: 0, w: 1, h: 2}} />

多个项目将获得相同的 y 值，但这对 react-grid-layout 来说不是问题。 x 值将从 0 变为 3。

使用 react-grid-layout 以编程方式生成网格项

Programatically generating grid items with react-grid-layout

meteor

reactjs

react-grid-layout