如何向班级添加图像网格列表?

问题描述 投票:0回答:1

所以我想做的是从此处添加单行网格列表: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中的图像列表。我已经尝试了几件事,但是总是遇到编译错误。

您至少能给我一个提示吗?

reactjs material-ui
1个回答
0
投票

如果您的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

© www.soinside.com 2019 - 2024. All rights reserved.