reactjs - 使用 map 函数，显示每个都有图像的地图元素

Question

我正在尝试使用 React 的 map 功能显示地图元素。每个地图元素都有一个图像。如果我看数组，这里面有内容，所以它被填充了。图片为Base64格式。如果我尝试使用 map 函数之外的数组中的图像渲染普通图像标签，这就是它的工作原理！所以它一定是由于地图功能 - 只是在哪里？

    {alleBilder.length &&
    alleBilder.map((bild, index) => {
      <Col md={3} xs={6}>
        <Card className={classes.root}>
          <CardActionArea>
            <img src={bild.bild}></img>
            <CardContent>
              <Typography gutterBottom variant="h5" component="h2">
                Lizard
              </Typography>
              <Typography
                variant="body2"
                color="textSecondary"
                component="p"
              >
                Lizards are a widespread group of squamate reptiles, with
                over 6,000 species, ranging across all continents except
                Antarctica
              </Typography>
            </CardContent>
          </CardActionArea>
          <CardActions style={{ float: "right" }}>
            <IconButton aria-label="add to favorites">
              <FavoriteIcon />
            </IconButton>
          </CardActions>
        </Card>
      </Col>;
    })}

标签： reactjs

Answer 1

你在搞乱map. 你应该从回调中返回 jsx 但你什么也没返回。请看如何map在 JSX 中使用：

。地图（）

如何在 JSX 中使用它

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li>{number}</li>
);

相当于：

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  (<li>{number}</li>)
);

相当于：

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) => {
  return (<li>{number}</li>)
}
);