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

Question

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

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

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

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

但是这个函数只有在断点改变时才会触发。我需要一个解决方案来了解码件安装后当前的断点是什么。

Answer 1

安装组件后，评估<ResponsiveGridLayout>上的 Prop 有一个 width 的 Prop 这将返回组件的当前宽度。从那里您可以将该数字与断点进行比较。

渲染后可用的 Prop 示例。

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