Question

我正在使用Material-UI版本1在我的React应用程序中创建网格UI。我想让网格响应。 GridList组件API具有 cols 道具，默认情况下为 2 。

例如，它可能如下所示。

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

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

Answer 1

U可以使用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);

Answer 2

您可以根据宽度（cols）选择xs, sm, md, lg, xl的值，请看此示例，其中为较小的屏幕设置了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);

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

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

Answer 4

我只是遇到了这个问题，在使用@morlo的答案时，我犯了一个错误，它开始显示js错误，但奇怪的是，它也使响应迅速！通过响应，我的意思是它显示了水平滚动，这在手机中很常见。

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

也许它没有记录，但实际上可以工作。

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

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

Answer 5

当你说你想让网格响应时，你是否意味着动态添加更多项目？如果没有，默认情况下Material-UI是响应式的（意味着您的视口的动态大小取决于您查看的设备），并且根据您的GridList属性（如cols，rows，spacing等），您可以确定风格。如果您查看https://material-ui-next.com/demos/grid-list/，可以通过几个示例来帮助您入门。

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

5 个答案: