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

【问题标题】：Is it possible to get initial breakpoint using react-grid-layout?是否可以使用 react-grid-layout 获得初始断点？
【发布时间】：2019-02-13 16:19:29
【问题描述】：

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

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

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

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

但是这个函数只在断点改变时触发。我需要一个解决方案来知道组件挂载后当前的断点是什么。

【问题讨论】：

标签： reactjs react-grid-layout

【解决方案1】：

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

渲染后可用的道具示例。

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

【讨论】：

【解决方案2】：

正如 CWSites 所述，一旦您的组件安装（使用componentDidMount）或在onWidthChange() 回调中（如果您使用ResponsiveGridLayout 组件），您可以执行以下操作：

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

const ResponsiveGridLayout = WidthProvider(Responsive);

class MyResponsiveGrid extends React.Component {

  initialBreakpoint = null;

  onWidthChange = width => {
    if (this.initialBreakpoint === null) {
      // The very first time.
      // Compute the initial breakpoint.
      const breakpoints = this.props.breakpoints;
      const sortedBreakpoints = Object.keys(breakpoints).sort(
          (breakpoint1, breakpoint2) =>
              breakpoints[breakpoint1] - breakpoints[breakpoint2]
      );
        let breakpoint = sortedBreakpoints[0];
        for (let i = 0; i < sortedBreakpoints.length; i++) {
            const currentBreakpoint = sortedBreakpoints[i];
            const nextBreakpoint = sortedBreakpoints[i + 1];
            if (
                typeof nextBreakpoint === "undefined" ||
                (breakpoints[currentBreakpoint] <= width &&
                    width <= breakpoints[nextBreakpoint])
            ) {
                breakpoint = currentBreakpoint;
                break;
            }
        }
        this.initialBreakpoint = breakpoint;

        // Call your method.
        this.props.updateBreakpointKey(this.initialBreakpoint)
    }
  }

  render() {
    // E.g.: {lg: layout1, md: layout2, ...}
    const layouts = this.props.layouts;

    // E.g.: {lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0}
    const breakpoints = this.props.breakpoints;

    // E.g.: {lg: 12, md: 10, sm: 6, xs: 4, xxs: 2}
    const cols = this.props.cols;

    return (
      <ResponsiveGridLayout layouts={layouts}
        breakpoints={breakpoints}
        cols={cols}
        onBreakpointChange={breakpoint => this.props.updateBreakpointKey(breakpoint)}
        onWidthChange={this.onWidthChange}>
        {this.props.children}
      </ResponsiveGridLayout>
    )
  }
}

【讨论】：

【解决方案3】：

您可以使用window.innerWidth 获取初始宽度并将该值与定义的断点进行比较以获取列。

import { useEffect, useState } from "react";
import { Responsive, WidthProvider } from "react-grid-layout";

import "react-grid-layout/css/styles.css";
import "react-resizable/css/styles.css";

const ROW_HEIGHT = 48;
const BREAKPOINTS = {
  lg: 1200,
  md: 996,
  sm: 768,
  xs: 480,
  xxs: 0,
};
const COLS = {
  lg: 16,
  md: 12,
  sm: 12,
  xs: 8,
  xxs: 4,
};

const ResponsiveGridLayout = WidthProvider(Responsive);

const Component = (props) => {
  const [cols, setCols] = useState();

  //To set initial cols value.
  useEffect(() => {
    const winWidth = window.innerWidth;
    for (let key in BREAKPOINTS) {
      if (winWidth > BREAKPOINTS[key] + 8) {
        //For me, breakpoints are working on (definedBreakpoints + 8) value.
        setCols(COLS[key]);
        break;
      }
    }
  }, []);

  const onBreakpointChange = (breakpoint, cols) => {
    setCols(cols);
  };

  return (
    <ResponsiveGridLayout
      onBreakpointChange={onBreakpointChange}
      breakpoints={BREAKPOINTS}
      cols={COLS}
      rowHeight={ROW_HEIGHT}
    >
      //...
    </ResponsiveGridLayout>
  );
};

export default Component;

【讨论】：