Question

所以我要尝试的是从此处添加单行网格列表： https://github.com/mui-org/material-ui/blob/master/docs/src/pages/components/grid-list/SingleLineGridList.js 到以下课程：

import React from 'react';
import { withTranslation } from 'react-i18next';
import '../css/home.css';
import Navbar from '../components/Navbar'
import ImgsViewer from 'react-images-viewer'
import image1 from '../resources/examples/1.jpg'
import image2 from '../resources/examples/2.jpg'
import { makeStyles } from '@material-ui/core/styles';
import GridList from '@material-ui/core/GridList';
import GridListTile from '@material-ui/core/GridListTile';
import GridListTileBar from '@material-ui/core/GridListTileBar';
import IconButton from '@material-ui/core/IconButton';
import StarBorderIcon from '@material-ui/icons/StarBorder';
import tileData from './tileData';

class HomeReal extends React.Component {



   constructor(props) {
        super(props);
        this.state = {
            isOpen : false,
        };
      }




    render(){
        const { t } = this.props;

        const state = {
            isOpen : false,         
        } 



        return(
            ... html code
        );
    }
}


export default withTranslation()(HomeReal);

我的反应真的很新，所以我几乎不了解。我已经添加了必要的进口。现在我不知道如何进行。

我只是想要HTML中的Material中的图像列表。我已经尝试了几件事，但是总是遇到编译错误。

至少可以给我一个提示吗？

Answer 1

试试这个，这对你有帮助

   1. create a folder name Assets then copy-paste all your
      desired images in that folder
   2. then import like this below(see code in import section)
   3. then follow the code
   4. it worked for me

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import GridList from "@material-ui/core/GridList";
import GridListTile from "@material-ui/core/GridListTile";
import GridListTileBar from "@material-ui/core/GridListTileBar";
import IconButton from "@material-ui/core/IconButton";
import StarBorderIcon from "@material-ui/icons/StarBorder";

import game from "../Assets/game.jpeg";
import ME from "../Assets/ME.JPG";

const useStyles = makeStyles((theme) => ({
  root: {
    display: "flex",
    flexWrap: "wrap",
    justifyContent: "space-around",
    overflow: "hidden",
    backgroundColor: theme.palette.background.paper,
  },
  gridList: {
    flexWrap: "nowrap",
    // Promote the list into his own layer on Chrome. This cost memory but helps keeping high FPS.
    transform: "translateZ(0)",
  },
  title: {
    color: theme.palette.primary.light,
  },
  titleBar: {
    background:
      "linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 70%, rgba(0,0,0,0) 100%)",
  },
}));



const tileData = [
  {
    img: game,
    title: "Image",
    author: "author",
  },
  {
    img: ME,
    title: "Image",
    author: "author",
  },
  {
    img: game,
    title: "Image",
    author: "author",
  },
  {
    img: game,
    title: "Image",
    author: "author",
  },
];

export default function LeisureTime() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <GridList className={classes.gridList} cols={2.5}>
        {tileData.map((tile) => (
          <GridListTile key={tile.img}>
            <img src={tile.img} alt={tile.title} />
            <GridListTileBar
              title={tile.title}
              classes={{
                root: classes.titleBar,
                title: classes.title,
              }}
              actionIcon={
                <IconButton aria-label={`star ${tile.title}`}>
                  <StarBorderIcon className={classes.title} />
                </IconButton>
              }
            />
          </GridListTile>
        ))}
      </GridList>
    </div>
  );
}

Answer 2

如果您的tileData如下所示：

const tileData = [
    {
      img: image,
      title: 'Image',
      author: 'author',
    },
   ...
  ];

这应该有效：

const useStyles = makeStyles(theme => ({
    // make your style
  }));

class HomeReal extends React.Component {

   constructor(props) {
        super(props);
        this.state = {
            isOpen : false,
        };
      }


    const classes = useStyles();

    render(){

        return(
            <div className={classes.root}>
                <GridList cellHeight={180} className={classes.gridList}>
                    <GridListTile key="Subheader" cols={2} style={{ height: 'auto' }}>
                    <ListSubheader component="div">December</ListSubheader>
                    </GridListTile>
                    {tileData.map(tile => (
                    <GridListTile key={tile.img}>
                        <img src={tile.img} alt={tile.title} />
                        <GridListTileBar
                        title={tile.title}
                        subtitle={<span>by: {tile.author}</span>}
                        actionIcon={
                            <IconButton aria-label={`info about ${tile.title}`} className={classes.icon}>
                            <InfoIcon />
                            </IconButton>
                        }
                        />
                    </GridListTile>
                    ))}
            </GridList>
        </div>
        );
    }
}

如果您想使用来自从'../resources/examples/1.jpg'导入image1 从'../ resources / examples / 2.jpg'

导入image2

然后将tile.img替换为image1

如何在班级添加图像网格列表？

2 个答案: