Using https://github.com/STRML/react-grid-layout
我需要知道componentDidMount
上的当前断点。根据断点,我知道我应该提供什么项目大小(网格项目由用户从多个选择中"拾取"(。
react-grid-layout
提供了用于更新断点的 API:
onBreakpointChange = breakpoint => this.props.updateBreakpointKey(breakpoint);
但此功能仅在断点更改时触发。我需要一个解决方案来了解组件装载后的当前断点是什么。
一旦你的组件挂载评估了<ResponsiveGridLayout>
上的 props,就会有一个用于width
的 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
>
正如 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>
)
}
}
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;