问将容器限制为三个固定尺寸

EN

export default class ShowcaseLayout extends React.Component {
  constructor(props) {
    ...
    // add the line below
    this.onResize = this.onResize.bind(this);
  }

  ...

  // add the method
  onResize(layout, oldLayoutItem, layoutItem, placeholder) {
    // `oldLayoutItem` contains the state of the item before the resize.
    // You can modify `layoutItem` to enforce constraints.
    const allowableW = this.props.cols[this.state.currentBreakpoint] - oldLayoutItem.x
    if (layoutItem.w <= 4) {
      layoutItem.w = 4;
      placeholder.w = 4;
    } else if (layoutItem.w <= 6) {
      layoutItem.w = allowableW < 6 ? 4 : 6;
      placeholder.w = allowableW < 6 ? 4 : 6;
    } else {
      layoutItem.w = allowableW < 12 ? 6 : 12;
      placeholder.w = allowableW < 12 ? 6 : 12;
    }
  }

  render() {
    return (
      <div>
        ...
        <ResponsiveReactGridLayout
          ...
          {/* bind method to component */}
          onResize={this.onResize}
        >
          {this.generateDOM()}
        </ResponsiveReactGridLayout>
      </div>
    );
  }
}

ShowcaseLayout.propTypes = {
  onLayoutChange: PropTypes.func.isRequired
};

ShowcaseLayout.defaultProps = {
  ...
  // ensure your breakpoints have a minimum of 4 columns
  cols: { lg: 12, md: 10, sm: 6, xs: 4, xxs: 4 },
};

function generateLayout() {
  return _.map(_.range(0, 25), function (item, i) {
    var y = Math.ceil(Math.random() * 4) + 1;
    return {
      x: (_.random(0, 5) * 2) % 12,
      y: Math.floor(i / 6) * y,
      // set item's default width to 4
      w: 4,
      h: y,
      i: i.toString(),
      static: Math.random() < 0.05
    };
  });
}

ShowcaseLayout.defaultProps = {
    className: "layout",
    rowHeight: 30,
    onLayoutChange: function() {},
    cols: { lg: 12, md: 12, sm: 6, xs: 4, xxs: 4 },
    initialLayout: generateLayout()
};

import { Responsive as ResponsiveGridLayout } from 'react-grid-layout';

class MyResponsiveGrid extends React.Component {
  render() {
    // {lg: layout1, md: layout2, ...}
    const layouts = getLayoutsFromSomewhere();
    return (
      <ResponsiveGridLayout className="layout" layouts={layouts}
        breakpoints={{lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0}}
        cols={{lg: 12, md: 10, sm: 6, xs: 4, xxs: 2}}>
        <div key="1">1</div>
        <div key="2">2</div>
        <div key="3">3</div>
      </ResponsiveGridLayout>
    )
  }
}

cols={{lg: 12, md: 6, sm: 6, xs: 4, xxs: 4}}