3

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>
    )
  }

}

x上記の例では、グリッドには行ごとに 4 列が必要yですが、testCollectionアイテム 1 ～ 4 が行 1 に、5 ～ 8 が行 2 に、9 ～ 10 が行 3 に、コレクション内のアイテムの数にかかわらず、同様です。

どうもありがとうございました。

4

1 に答える 1

4

デフォルトでは、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 になります。

于 2016-05-22T12:22:08.163 に答える