是否可以使用react-grid-layout获得初始断点？

Question

使用https://github.com/STRML/react-grid-layout

我需要知道当前的断点componentDidMount。基于断点，我知道我应该提供什么项目大小（网格项目由用户从多个选择中“拾取”）。

react-grid-layout提供更新断点的API：

  onBreakpointChange = breakpoint => this.props.updateBreakpointKey(breakpoint);

但此函数仅在断点更改时触发。我需要一个解决方案来了解组件安装后当前的断点是什么。

Answer 1

一旦您的组件安装评估了 props，<ResponsiveGridLayout>就会有一个 propswidth返回组件的当前宽度。从那里您可以将该数字与断点进行比较。

渲染后可用的道具示例。

<ResponsiveGridLayout 
  autoSize: true
  breakpoints: { lg: 1100, md: 768, sm: 0 }
  children: [...]
  cols: { lg: 12, md: 10, sm: 6 }
  layouts: { lg: [...], md: [...], sm: [...] }
  onBreakpointChange: onBreakpointChange()
  onLayoutChange: onLayoutChange()
  verticalCompact: true
  width: 1180
>