J'utilise la grille de l'interface utilisateur matérielle pour afficher une liste d'événements de réaction. Tout fonctionne bien, sauf que je ne suis pas capable de rendre le titre ou l'image d'un lien. Est-ce que quelqu'un sait faire le titre et l'image un lien?
Voici mon composant. Ceci est une mise à jour de la réponse cela a été donné ci-dessous. La première image est maintenant plus petite que le reste des images après la mise à jour du code avec la solution indiquée ci-dessous. Voici le nouveau code que j'essaye: mise à jour
< / p>
3 Réponses :
Essayez d'envelopper l'image avec une balise d'ancrage comme ceci:
<img
// ...
style={{ width: "100%" }}
className="MuiGridListTile-imgFullHeight"
/>
Merci beaucoup @bas mais le seul problème que je suis confronté est que la taille du premier événement de la liste est maintenant plus petite que le reste des événements.
Avez-vous ajouté la classe à l'image comme je l'ai fait dans ma réponse?
Oui je l'ai fait. @Bas j'ai mis à jour ma question avec le résultat que je reçois.
Je viens de faire maintenant @bas pouvez-vous vérifier maintenant
Que vous tellement de @bas, j'aime bien le fait que vous avez expliqué tout ce que vous avez fait et la raison du problème. Tout fonctionne correctement car il se doit, sauf que les images sont étirées / pressées. Merci encore.
Est-il possible d'utiliser
J'ai finalement réussi à faire fonctionner sans casser ou étirer mes images, et voici ce que j'ai fait.
<div className={classes.root}>
<GridListTile key="Subheader" style={{ height: "auto" }}>
<ListSubheader component="div">This is List of Events</ListSubheader>
</GridListTile>
<GridList
cellHeight={330}
cols={matches ? 1 : 3}
className={classes.gridList}
spacing={12}
>
{tileData.length > 0 &&
tileData.map((tile, index) => {
return (
<GridListTile
component={Link}
to={"/events/" + tile._id + "/eventcomments"}
key={Math.floor(Math.random() * new Date().getTime())}
>
<img src={tile.eventImage} alt={tile.title} />
<GridListTileBar title={tile.title} />
</GridListTile>
);
})}
</GridList>
</div>
const Gallery = () => {
const classes = useStyles();
return (
<Fragment>
<div style={{background: "black"}}>
<Toolbar/>
<Grid container spacing={0}>
<Grid item xs={12}>
<Paper className={classes.paper}>GALERIA</Paper>
<div className={classes.root}>
<GridList cellHeight={280} className={classes.gridList} cols={1}>
{tileData.map((tile) => (
<GridListTile style={{ width: "100%" }} key={tile.img} cols={tile.cols || 1}>
<img src={tile.img} alt={tile.title} />
</GridListTile>
))}
</GridList>
</div>
</Grid>
</Grid>
</div>
</Fragment>
)
}
export default Gallery;
Commentaires: Cette question a été modifiée dans un état déroutant et j'ai essayé de le réparer. Lorsqu'une réponse est donnée à une question, la question ne doit pas être réécrite en fonction de cette réponse. parce que le problème a changé. En effet, pour les lecteurs à l'avenir, la réponse donnée n'aura plus de sens en fonction de la question telle qu'elle se trouve maintenant.
J'ai donc renvoyé la question à la dernière bonne situation, puis a ajouté la nouvelle version du code dans une section de mise à jour. Cela rend beaucoup plus clair pour les lecteurs à quel point le problème initial était et comment il a évolué.