首页 > 解决方案 > 如何一次为一个 React 组件做方法映射?

问题描述

我有那个代码,只是被困在这里:

const images = 
  [
    {src: 'someimage', id: 1},
    {src: 'someimage2', id: 2},
    {src: 'someimage3', id: 3}
  ]

  return (
    <ImageList>
      {images.map((item) => (
        <ImageListItem className={classes.media} key={images.id} >
          <img src={item.src} alt={item.title} />
        </ImageListItem>
      ))}
    </ImageList>
);

我想用一个单独的图像渲染每个 ImageListItem 组件,计划将它绑定到 key.id 但我总是有这样的结果:...

在此处输入图像描述

有上层组件:

const themes = [1,2,3];
  return (
    <Grid container className={classes.root}>
        <Grid container justifyContent="center" spacing={10}>
          {themes.map(() => (
            <Grid item >
              <Paper elevation={3} className={classes.paper}>
                <Theme/>
              </Paper>
              <Typography align='center' variant="subtitle1">Название</Typography>
            </Grid>
          ))}
        </Grid>
    </Grid>
  );

问题中的所有代码都在主题组件中。只有另一个方法图可以干净地呈现

标签: arraysreactjsdictionarymaterial-ui

解决方案


推荐阅读