Как добавить список сетки изображений в класс?

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. Я пробовал несколько вещей, но я всегда получаю ошибки компиляции.

Можете ли вы дать мне подсказку?

Answer 1

Если ваш 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>
        );
    }
}

Если вы хотите использовать изображения из импорта image1 из '../resources/examples/1.jpg 'импортировать image2 из' ../resources/examples/2.jpg'

, затем заменить tile.img на image1