将容器限制为三个固定大小

Question

我正在查看基于 Material Design 的 12 列网格的 react-grid-layout。有没有一种方法可以为容器提供预定义尺寸以符合以下 3 种尺寸：1 个全宽（12 列）、半格（6 列）或 1/3 格（4 列）？

Answer 1

我不太了解react-grid-layout。

但是您可以通过简单更改 ShowcaseLayout.defaultProps 的 cols 属性来实现，如下所示。

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

UPDATED Sandbox

Answer 2

我的猜测是，当您说容器时，您指的是布局项。如果是这种情况，请使用自定义 onResize 方法。使用问题中的沙箱代码：

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

DEMO

Answer 3

是的，你当然可以用 react-grid-layout. In the section of their documentation labeled "Usage without Browserify/Webpack" 做到这一点，他们有这个代码片段：

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

您可以随心所欲地修改断点，它指示屏幕将在哪个 screen/viewport 宽度处考虑新尺寸（例如 lg 与 md 与 sm, 等等).

定义 breakpoints 后，使用 cols 属性定义您希望每个容器位于不同断点的列数。如果您只想要您提到的三种尺寸——1 个全宽（12 列）、½ 网格（6 列）和 ⅓ 网格（4 列）——将 cols 属性调整为如下所示：

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

使用这些重新定义的值，此网格中的元素将在 lg 视口上为全宽，在 md 和 sm 视口上为 ½ 网格，在 sm 上为 ⅓ 网格=21=] 和 xxs 视口。

将容器限制为三个固定大小

Limiting containers to three fixed sizes

javascript

reactjs

react-grid-layout