用反应网格编程生成网格项.布局

Question

我正在使用Meteor和ReactJS开发一个应用程序。我正在使用反应网格布局组件创建一个条目网格。

问题是每个元素的位置需要手动指定。在我的应用程序中，我基于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网格布局的参数verticalCompact设置为true，这意味着如果多个项得到相同的y值，它将垂直压缩。我想你可以写：

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

有几个项目将得到相同的y值，但这对于响应网格布局来说不是一个问题。X值将从0到3。