如何使 React Material-UI 中的 GridList 组件具有响应性

Posted 2023-02-19

【中文标题】如何使 React Material-UI 中的 GridList 组件具有响应性

【英文标题】：How to make the GridList component in React Material-UI responsive

【发布时间】：2018-08-01 22:48:31

【问题描述】：

我正在使用 Material-UI 版本 1 在我的 React 应用程序中制作网格 UI。我想让网格响应。 GridList 组件 API 有 cols 属性，默认为 2。

例如，它可能如下所示。

<GridList cols=1 spacing=32 className="list"></GridList>

我可以动态更改道具吗？或者有没有其他方法让它响应？

【参考方案1】：

你可以使用 MUI 提供的layout breakpoints 来切换 GridList 或 GridListTile cols 属性。 代码将如下所示：

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

const MyComponent = props => 
  const getGridListCols = () => 
    if (isWidthUp('xl', props.width)) 
      return 4;
    

    if (isWidthUp('lg', props.width)) 
      return 3;
    

    if (isWidthUp('md', props.width)) 
      return 2;
    

    return 1;
  

  return(
    ...
    <GridList spacing=15 cellHeight=400 cols=getGridListCols()>
      
        myItemsArray.map(item => (
          <GridListTile key=item cols=1>
            <FooBar />
          </GridListTile>
        ))
      
    </GridList>
    ...
  );
;

...

export default withWidth()(MyComponent);

【讨论】：

这会在调整屏幕大小时更新列数吗？

是的，这将在调整屏幕大小时更新列数，因为 HOC（高阶组件）withWidth 将在浏览器宽度更改时请求重新渲染。注意：您现在可以按照此处的建议使用 useWidth React 挂钩。

【参考方案2】：

您可以根据宽度 (xs, sm, md, lg, xl) 选择 cols 值，请查看此示例，其中为较小的屏幕设置了 1 列。

import React from "react";
import  connect  from 'react-redux';
import PropTypes from 'prop-types';
import compose from 'recompose/compose';

// @material-ui/core components
import withStyles from "@material-ui/core/styles/withStyles";
import withWidth from '@material-ui/core/withWidth';
import GridList from '@material-ui/core/GridList';
import GridListTile from '@material-ui/core/GridListTile';
import GridListTileBar from '@material-ui/core/GridListTileBar';

const styles = theme => ( );

class MyComponent extends React.Component 
    render() 
        const  classes, currentUser, images, width  = this.props;

        let columns = width === 'xs' || width === 'sm'  ? 1 : 2;

        return (
            <div className=classes.root>
                <GridList cellHeight=180 cols=columns className=classes.gridList>
                    images.map(image => (
                    <GridListTile key=image.id>
                        <img src= image.path  />
                        <GridListTileBar
                            title= image.name 
                        />
                    </GridListTile>
                    ))
                </GridList>
            </div>
        );
    


MyComponent.propTypes = 
    currentUser: PropTypes.object,
    images: PropTypes.array.isRequired
;

function mapStateToProps(state) 
    return 
        currentUser: state.user.currentUser
    ;


export default compose(
  withStyles(styles, 
    name: 'MyComponent',
  ),
  withWidth(),
  connect(mapStateToProps),
)(MyComponent);

【参考方案3】：

从 Material-UI v4.4 开始，您可以将 use useMediaQuery React hook 与 theme.breakpoints.up 结合使用：

import useMediaQuery from '@material-ui/core/useMediaQuery';

function MyComponent() 
  const matches = useMediaQuery(theme => theme.breakpoints.up('sm'));

  return <span>`theme.breakpoints.up('sm') matches: $matches`</span>;

⚠️ 没有默认主题支持，您必须将其注入到父主题提供程序中。

【参考方案4】：

我刚遇到这个问题，在使用@morlo 的答案时，我犯了一个错误，它开始显示一个 js 错误，但奇怪的是它也让它响应了！所谓响应式，我的意思是它显示了移动设备中常见的水平滚动。

所以我删除了该代码并使用了不同的值，cols=0 起作用了！

也许它没有记录，但它确实有效。

还值得一提的是我使用的其他一些设置：

<GridList style=
        width: '100%',
        maxHeight: 320,
        flexWrap: 'nowrap'
 cols=0 cellHeight='auto'>
...
</GridList>

【讨论】：

这并不能解决问题。无论屏幕大小如何，都会“部分”显示一列。

【参考方案5】：

当你说你想让网格响应时，你的意思是动态添加更多项目吗？如果没有，默认情况下Material-UI 是响应式的（这意味着您的视口会根据您查看的设备动态调整大小），并且根据您的GridList 属性（如列、行、间距等），您可以确定样式。如果您查看https://material-ui-next.com/demos/grid-list/，这里有一些示例可以帮助您入门。

【讨论】：

@sflow 您觉得以上内容对解决您的问题有帮助吗？

这没有帮助，因为它没有回答他的要求。他在问如何动态更改cols 属性:)