css - 如何根据数组的长度更改 CSS className？

Question

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

我正在遍历一个包含.map在 JSX 内部使用的相关文章的数组。有三种可能的结果：

1. 没有相关文章，我什么也不显示
2. 我将展示一篇相关文章，其中包含 CSS 类styles.moreArticlesOne
3. 我将展示两篇相关的文章，其中的 CSS 类styles.moreArticlesTwo

我想根据数组中是否有一篇相关文章被映射或者是否有两篇相关文章被映射来更改 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>
      );
    }
  });
}

如您所见，我尝试使用三元运算符但无济于事。className={topTwoArticles.length === 2 ? styles.moreArticlesTwo : styles.moreArticlesOne}不起作用。

标签： cssreactjsconditional-operatorternaryclassname