Jquery ui 使用Pacery（masonary）布局拖放语义UI React组件

我正在开发一个基于卡片的用户界面，它具有砖块布局。我正在为卡片组件使用语义ui react，为masonary布局使用react packery组件

我的反应部件是这个

import React from 'react';
import DisplayHomePageCardStructure from   
 './DisplayHomePageCardStructure.jsx';
import {Grid} from 'semantic-ui-react';
const Packery = require('react-packery-component')(React);

let packeryOptions = {
 // transitionDuration: 0,
    gutter: 20
};

class DisplayHomePageCard extends React.Component {
constructor() {
    super();
}

render() {
    /* Getting the values from Mongo db*/
    let Data = this.props.display.map(function(item) {
        return (
            <Grid.Column>
              <DisplayHomePageCardStructure id={item.id} displayImage= 
                {item.displayImage}
              heading={item.heading} question={item.question} postedBy=
                {item.postedBy}
              addedOn={item.addedOn} category={item.category} upVotes=
                 {item.upVotes}
              downVotes={item.downVotes} answerCounts={item.answerCounts}  '               
                  views={item.views}
              profileImage={item.profileImage}
            />
          </Grid.Column>

        );
    });
    return (
      <Packery
        elementType={'div'} options={packeryOptions} className = 'packery'>
          {Data}
        </Packery>
    );
  }
}
DisplayHomePageCard .propTypes = {
   display: React.PropTypes.func
 };
module.exports = DisplayHomePageCard;

从“React”导入React；
从导入DisplayHomePageCardStructure
'./DisplayHomePageCardStructure.jsx'；
从“语义ui反应”导入{Grid}；
常量封隔器=要求（'react-Packery-component'）（react）；
设封隔器选项={
//转换持续时间：0，
排水沟：20
};
类DisplayHomePageCard扩展了React.Component{
构造函数（）{
超级（）；
}
render（）{
/*从Mongo db获取值*/
让Data=this.props.display.map（函数（项）{
返回(
您可以通过react来实现它，只需相对简单地使用库即可