如何根据数组的长度更改CSS类名？

我有一个盖茨比项目和一个博客，我正在博客文章中添加一个“相关文章”部分。如果读者正在阅读的文章中有具有相同标签的相关文章，我希望在卡片中显示最多两篇相关文章，并带有文章链接

我正在使用JSX内部的

.map

遍历包含相关文章的数组。有三种可能的结果：

没有相关文章，我将不显示任何内容

我将展示一篇与CSS类

样式相关的文章

我将在CSS类

样式中显示两篇相关文章

我想根据数组中是否有一个相关文章被映射，或者是否有两个相关文章被映射，来更改CSS样式

如何检查包含相关文章的数组的长度，如果有一篇文章，如何添加一个CSS类，如果有两篇文章，如何添加另一个CSS类

{
  topTwoArticles.map((article, index) => {
    let articleNameForURL = article[1].split(" ").join("-").toLowerCase();
    articleNameForURL.split(",").join("");
    if (article[5] !== ghostIDOfThisArticle) {
      return (
        // I am trying to use a ternary to apply the CSS classes but it isn't working
        <Link
          to={`/blog/${articleNameForURL}`}
          className={
            topTwoArticles.length === 2
              ? styles.moreArticlesTwo
              : styles.moreArticlesOne
          }
        >
          <div
            className={styles.thumb + " " + styles.cover}
            style={{ backgroundImage: `url(${article[0]})` }}
          ></div>
          <div className={styles.info}>
            <p>{moment(article[4]).format("MM/DD/YYYY")}</p>
            <h3>{article[1]}</h3>
          </div>
          <div className={styles.button}>
            {index === 0 ? (
              <FontAwesomeIcon icon="arrow-alt-circle-left" />
            ) : (
              <FontAwesomeIcon icon="arrow-alt-circle-right" />
            )}
          </div>
          <span className={styles.overlay}></span>
        </Link>
      );
    }
  });
}

{
topTwoArticles.map（（文章，索引）=>{
让articleNameForURL=article[1]。拆分（“”）。联接（“”）。toLowerCase（）；
articleNameForURL.split（“，”）.join（“）；
如果（第[5]条）！==该条的幽灵{
返回(
//我正在尝试使用三元组来应用CSS类，但它不起作用
{矩（第[4]条）格式（“MM/DD/YYYY”）}

{第[1]条]
{index==0(
) : (
)}
);
}
});
}

---

如你所见，我尝试使用三元运算符，但没有用

className={topTwoArticles.length==2？styles.moreArticlesTwo:styles.moreArticlesOne}

不起作用。

我看不到任何明显的问题。在调试器或一些console.log语句中使用一两分钟可能会告诉您错误所在。console.log记录数组的长度会显示正确的长度，但是我的CSS类没有被应用，似乎三元数组不起作用。我是否需要ES6 backticks中的部分三元代码？您的代码似乎很好，但是您可以记录

topTwoArticles.length==2吗？style.moreArticlesTwo:style.morearticlessone

在地图中（例如返回之前）？在那里检查类名是否正确。你也把

样式放进去了吗？更多的文章两个

和另一个硬编码，看看它在链接上的应用是否良好，在UI中的显示是否正常？