reactjs - 如何在 React Material-UI 中动态更改 GridList 的列

Question

我正在关注 React Material UI 设计，用于水平滚动的水平单行图像网格列表。如何根据屏幕尺寸(xm、sm、md、ls)动态更改“Cols”值？例如 md 屏幕将是“12 列”，sm 屏幕将是“4 列”等。

单行网格列表

https://material-ui.com/demos/grid-list/#single-line-grid-list

  <GridList className={classes.gridList} cols={3}>......</GridList>

Answer 1

我们可以试试@material-ui/core/withWidth的布局断点。

基本上，我们注册宽度变化事件并基于该事件计算出最终的列数

这是我的例子:

import withWidth, { isWidthUp } from '@material-ui/core/withWidth';

const ExampleComponent = (props) => {

    function getCols(screenWidth) {
      if (isWidthUp('lg', screenWidth)) {
        return 5;
      }

      if (isWidthUp('md', screenWidth)) {
        return 3;
      }

      return 2;
    }

    const cols = getCols(props.width); // width is associated when using withWidth()

    return ( < GridList cols={cols}... > ... </GridList>)
  }
  
export default withWidth()(ExampleComponent)

您可以查看一个 API 以获得更多信息:https://material-ui.com/customization/breakpoints/