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内部每一个元素的高度都变的更高了, 不知道原因, 有没有大神用过.
###路人甲做个答。这个问题,以前用的时候也十分纠结过。
其实 react-grid-layout 在计算宽高的时候是会把 margin 一同算进去的,至于为什么这么设计我也费解,以下为源码(链接):
比如当前 margin=[10, 10]
、rowHeight=30
、h=2
,实际的高度为:
Math.round(30 * 2 + Math.max(0, 2 - 1) * 10)
// 等于 70
大致是这样的逻辑。