javascript数组如何用新行显示结果答案

【问题标题】：How the javascript array display result with new linejavascript数组如何用新行显示结果
【发布时间】：2021-01-02 01:34:32
【问题描述】：

任何提示或帮助将不胜感激！在 imageList.js 中，以下 {images} 是一个数组。数组的字符串“div”的返回如何返回下图：

返回{图片}

如果每条记录都有一个“\n”新行，则显示此结果？：

        import React from 'react';

    const ImageList = props => {
      const images =   props.images.map((image) => {
        return <img src={image.urls.regular} />
        });
        console.log(props.images)
        return <div>{images}</div>;
    }

    export default ImageList;

结果：

【问题讨论】：

标签： reactjs

【解决方案1】：

为此，您正在创建 img 元素，并且根据您的 css，它们将占用整个容器宽度。解决这个问题需要指定图像大小，例如

div{
display: grid;
grid-template-column: repeat(3, 1fr)
}

或

img{
width: 45%;
}

但最终，这取决于你的风格

【讨论】：

【解决方案2】：

您的图像列表显示正确，但您错过了它的 css。可以使用material ui的GridList或gird系统或者您构建自己的设计。

这是一个示例

<GridList cellHeight={160} className={classes.gridList} cols={3}>
  {imagess.map((image) => (
  <GridListTile key={image.key} cols={image.cols || 1}>
     <img src={image.img} alt={image.title} />
  </GridListTile>
  ))} </GridList>

在下面的链接中，您可以找到更多有用的信息。

【讨论】：