使用react-grid-layout时margin配置后元素高度异常

Question

module: react-grid-layout
version: ^0.18.3

import {WidthProvider, Responsive} from 'react-grid-layout';

const ResponsiveReactGridLayout = WidthProvider (Responsive);

// 属性配置
const GridProps = {
  cols: {lg: 12, md: 10, sm: 6, xs: 4, xxs: 2},
  rowHeight: 10,
  margin: [10, 10],
  containerPadding: [10, 10],
  totalColumn: 12,
};

<ResponsiveReactGridLayout
    className="layout"
    {...GridProps}
    onLayoutChange={(layout, layouts) =>
      this.onLayoutChange (layout, layouts)}
    >
    {this.generateDOM ()}
</ResponsiveReactGridLayout>

margin: [10, 10], 导致ResponsiveReactGridLayout内部每一个元素的高度都变的更高了, 不知道原因, 有没有大神用过.

Answer 1

路人甲做个答。这个问题，以前用的时候也十分纠结过。

其实 react-grid-layout 在计算宽高的时候是会把 margin 一同算进去的，至于为什么这么设计我也费解，以下为源码（链接）：

比如当前 margin=[10, 10]、rowHeight=30、h=2，实际的高度为：

Math.round(30 * 2 + Math.max(0, 2 - 1) * 10)
// 等于 70

大致是这样的逻辑。