Можно ли получить начальную точку останова, используя ответную сетку?

Question

Используя https://github.com/STRML/react-grid-layout

Мне нужно знать текущую точку останова на componentDidMount, Исходя из точки останова, я знаю, какие размеры элементов я должен предоставить (элементы сетки "выбираются" пользователем из множественного выбора).

react-grid-layout предоставляет API для обновления точки останова:

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

Но эта функция срабатывает только при изменении точки останова. Мне нужно решение, чтобы узнать текущую точку останова после монтирования компонентов.

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

Answer 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>
    )
  }
}

Answer 3

Вы можете использовать window.innerWidth чтобы получить начальную ширину и сравнить значение с определенными точками останова, чтобы получить столбцы.