时间戳

首页 > 解决方案 > 如何在移动设备上使用 React 和 materialUI 使 GridList 在一行中垂直面对

node.js - 如何在移动设备上使用 React 和 materialUI 使 GridList 在一行中垂直面对

问题描述

如何在 Mobile 上的 One Row 中垂直制作 Materia-UI GridList Face？我的 GridList 是连续两个，这是我想要的，但是当我在移动设备上检查它时，它仍然连续显示两个而不是一个。这意味着它没有响应，我该如何让它响应？

这是我的事件组件。

import React from "react";

import { Link } from "react-router-dom";
import axios from "axios";

import GridList from "@material-ui/core/GridList";
import GridListTile from "@material-ui/core/GridListTile";
import GridListTileBar from "@material-ui/core/GridListTileBar";
import ListSubheader from "@material-ui/core/ListSubheader";
mport IconButton from "@material-ui/core/IconButton";
import Button from "@material-ui/core/Button";
import { withStyles } from "@material-ui/core/styles";
import Typography from "@material-ui/core/Typography";

const useStyles = (theme) => ({
 root: {
  display: "flex",
  flexWrap: "wrap",
  justifyContent: "space-around",
  overflow: "hidden",
  backgroundColor: theme.palette.background.paper,
},
gridList: {
  width: 1000,
  height: 950,
},
icon: {
  color: "rgba(255, 255, 255, 0.54)",
},
});

class EventsList extends React.Component {
constructor(props) {
  super(props);
  this.state = { events: [] };
}

componentDidMount() {
  axios
    .get("http://localhost:9000/events/")
    .then((response) => {
      this.setState({ events: response.data });
    })
    .catch(function (error) {
      console.log(error);
    });
}

render() {
const { classes } = this.props;
return (
  <div className={classes.root}>
    <GridList cellHeight={330} className={classes.gridList} spacing={8}>
      <GridListTile key="Subheader" cols={2} style={{ height: "auto" }}>
        <ListSubheader component="div">December</ListSubheader>
      </GridListTile>
      {this.state.events.map((tile) => (
        <GridListTile key={tile.eventImage}>
          <img src={tile.eventImage} alt={tile.title} />
          <GridListTileBar title={tile.title} titlePosition="top" />

          <GridListTileBar
            paragraph={tile.description}
            actionIcon={
              <IconButton
                aria-label={`info about ${tile.title}`}
                className={classes.icon}
              ></IconButton>
            }
          />
        </GridListTile>
      ))}
    </GridList>
  </div>
);
 }
}

export default withStyles(useStyles)(EventsList);

这是 GridList 在移动设备上显示的我的事件列表 这就是 GridList 给我的

但是像这样的东西是我在移动设备上时想看到的。Tshis 是我想在手机上看到的

标签： node.jsreactjsmaterial-ui

解决方案

由于您使用的是基于类的组件，因此您可以使用withWidth有条件地将cols值设置为GridList.

请参阅代码沙箱中的工作示例

示例代码片段

class TitlebarGridList extends Component {
  render() {
    const { classes, width } = this.props; // <---- see here
    let columns = width === "xs" || width === "sm" ? 1 : 2;
    console.log("=========>", width);
    return (
      <div className={classes.root}>
        <GridList cellHeight={200} className={classes.gridList} cols={columns}>  {/* //<---- see here */}
          <GridListTile key="Subheader" cols={3} style={{ height: "auto" }}>
            <ListSubheader component="div">December</ListSubheader>
          </GridListTile>
          {tileData.map(tile => (
            <GridListTile key={tile.title}>
              <img className={classes.image} src={tile.img} alt={tile.title} />
            </GridListTile>
          ))}
        </GridList>
      </div>
    );
  }
}

TitlebarGridList.propTypes = {
  classes: PropTypes.object.isRequired
};

export default compose(
  withStyles(styles, {
    name: "TitlebarGridList"
  }),
  withWidth() //<---- see here
)(TitlebarGridList);

注意：withWidth将来某个时候会被弃用，所以考虑使用useMediaQuery 钩子（在这种情况下你必须切换到功能组件）。

推荐阅读