在 React 映射循环中连接 className 值答案

【问题标题】：Concatenate className values in React map loop在 React 映射循环中连接 className 值
【发布时间】：2021-08-27 05:12:59
【问题描述】：

我正在从数据库查询中循环一周中的几天，其中“node.club_night_day”是一周中的一天：

{nights.edges.map(({ node }, index) => (
  <div key={index}>
    <div className={clubNightsIcon+node.club_night_day}>
      <div>{node.club_night_name}</div>
    </div>
  </div>
))}

CSS：

.club-nights-icon-wednesday {
  background: linear-gradient(180deg, #DE9FAE 0%, #E70F50 100%);
}

我希望类的定义是

clubNightsIconMonday

clubNightsIconTuesday

这在 React 中可行吗？（我正在使用 GatsbyJS）

【问题讨论】：

标签： reactjs

【解决方案1】：

在尝试了各种方法将字符串与节点值连接后，我决定尝试一个开关，在看到这篇文章后：https://stackoverflow.com/a/51432223/2030399 我有这个很好用...

              <div
                className={
                  {
                    Monday: clubNightsIconMonday,
                    Tuesday: clubNightsIconTuesday,
                    Wednesday: clubNightsIconWednesday,
                    Thursday: clubNightsIconThursday,
                    Friday: clubNightsIconFriday,
                    Saturday: clubNightsIconSaturday,
                    Sunday: clubNightsIconSunday,
                  }[node.club_night_day]
                }
              ></div>

【讨论】：

【解决方案2】：

我知道“clubNightsIcon”不是变量，而是您要传递的字符串。如果是这种情况，那么您应该可以这样做：

<div className={"clubNightsIcon" + (node.club_night_day)}>

托马斯。

【讨论】：

这对我不起作用。可能是因为我使用的是全局样式表，而 React 需要查看文档顶部定义的类名，该类名与返回中的 className 声明匹配，以正确呈现它。使用您的代码，我得到：
需要时：
好吧，在那种情况下，我不明白你想做什么......我在想你想要一个等于 clubNightsIconMonday 的 className。但无论如何，逻辑是成立的。如果要将字符串与类名的变量连接起来，则必须确保变量在括号中。让我知道你需要什么结果，我有点好奇。托马斯。
我希望 className 为 clubNightsIconMonday 并且您提供的代码可以做到这一点，但 React 不会在最终 HTML 中将其呈现为 --club-nights-icon-monday-- 所以它不会t 显示正确的 CSS。我正在像这样导入 CSS： import { clubNightsIconMonday, } from "../components/layout.module.css";我认为这正是 React（或者可能是 Gatsby）所期望的方式。