所以我想做的是从此处添加单行网格列表: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中的图像列表。我已经尝试了几件事,但是总是遇到编译错误。
您至少能给我一个提示吗?
如果您的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