React - 下一篇博客：浏览器上显示空行

Question

我正在编写一个从 Mongo Atlas 获取数据的博客，该页面位于 Vercel 上托管的 Nextjs 9.5.4 中。博客页面使用静态道具和再生

数据以 JSON 的形式出现，所有内容都被字符串化。

 return {
      props: {
        articles: JSON.parse(JSON.stringify(articles)),
      },

博客文章 = 文章都有标题、文本和签名行（作者和日期） 有些文章有链接，有些文章有一两张图片。相关部分代码如下：`

{articles.map((article) => (
      <li key={article.id}>
      <h2  className={styles.blogtitle} >{article.title}</h2>
      <p  className={styles.blogtext}>{article.text}</p>
      <img src={article.image1} className={styles.blogimage} alt={article.alt1} ></img>
      <img src={article.image2} className={styles.blogimage} alt={article.alt2} ></img>
      <p>{""}
      <a
       href={article.link} 
      title={article.link}
      target="_blank"
      rel="noopener noreferrer" >
      {article.link}            
      </a>
      </p>
      <p  className={styles.bloginfos}>{article.author}, le {article.date.slice(0,10)} à {article.date.slice(11,16)} h</p>
      </li>
    ))}

当我添加图片和链接时，所有没有图片或链接的帖子都显示为 2 张图片和 1 个链接的空行。浏览器检查器显示每个列表条目都有一个 <img class="nextGeneratedName1"> <img class="nextGeneratedName1">
空标签和 ap 标签，其中包含

<a target="_blank" rel="noopener noreferrer"></a>

（至少它并没有真正在新标签中添加一个空链接）

如何避免这些空行？我想图像线是通过 Next 添加独立于内容的类创建的。但是空段落没有内容，也没有特定的类，不应该显示在 html 中。整个项目在 GitHub 上， 这个页面是 blog.js

Answer 1

您可以进行条件检查，如果图像 url 存在，则仅显示它，否则不要显示它，例如，对于 blog.js 文件的第 30 行，您可以执行以下操作：

{article.image1 && <img src={article.image1} className={styles.blogimage} alt={article.alt1} ></img>}

类似地，对于所有您认为在任何情况下都可以为空的项目，例如 a、p 等。