Reactjs 使用react问题更改内联css

我正在盖茨比前端中映射som日期值，我正在从Strapi后端检索该值

我想要实现的是根据{item.end}的值是否大于当前日期来更改背景色。{item.end}包含日期值

我做了一个正常的if-else语句来检查这个条件，当控制台记录时，它会根据日期值返回循环中正确的迭代次数和正确的响应

但是，当我尝试将相同的逻辑应用于我的道具时：

<h4 className={
    TodayDate.getDate() > courseEndDate? "educationsOver": "job-desc"
}>{item.title}
</h4>

courseEndDate？“教育结束”：“工作描述”
}>{item.title}

这些类不是动态应用的。不应用任何更改，并且仅应用.job desc的标准类

这是我当前的代码：

{course.map(item => {

            let courseEndDate = item.end
            //console.log(`Course end date: ${courseEndDate}`)
            const TodayDate = new Date()
            courseEndDate = new Date(courseEndDate)

            if (TodayDate > courseEndDate) {
              console.log(
                `${courseEndDate} Course end date is not greater than the current date ${TodayDate}.`
              )
            } else {
              console.log(
                `${courseEndDate} Course end date is greater than the current date ${TodayDate}.`
              )
            }

            return (
              <div key={item.id} className="job-desc">
                <h4>Kurs:</h4>
                <h4
                  className={
                    TodayDate.getDate() > courseEndDate
                      ? "educationsOver"
                      : "job-desc"
                  }
                >
                  {item.title}
                </h4>
                <span>{item.credits}&nbsp;poäng</span>
                <span>startdatum: {item.start}</span>&nbsp;
                <span>slutdatum: {item.end}</span>
              </div>
            )
          })}

{course.map（项目=>{
让courseEndDate=item.end
//log（`课程结束日期：${courseEndDate}`）
const TodayDate=新日期（）
courseEndDate=新日期（courseEndDate）
如果（今天日期>课程日期）{
console.log(
`${CourseenDate}课程结束日期不大于当前日期${TodayDate}`
)
}否则{
console.log(
`${CourseenDate}课程结束日期大于当前日期${TodayDate}`
)
}
返回(
库尔斯人：
Courseendate
“教育结束”
：“作业描述”
}
>
{item.title}
{item.credits}poäng
startdatum:{item.start}
slutdatum:{item.end}
)
})}

我的代码中缺少了什么？

---

谢谢：）

我认为您的代码应该如下所示：

<h4 className={TodayDate > courseEndDate ? "educationsOver" : "job-desc"}>

---

最终使用与以下描述相同的方法修复：

<h4 style={{ color: TodayDate > courseEndDate ? "red" : "grey",}} > {item.title} </h4>

courseEndDate？“红色”：“灰色”，}}>{item.title}

Thank@Ferran，educationsOver的html div元素中显示了正确的类，但是css检查器显示了job-desc。我想我把它复杂化了，实际上我可以使用.job-desc类，但只需更改背景色即可。如果我只想更改作业描述中的背景，我将如何根据相同的日期条件更改代码只要在

return

语句中添加一个三元条件我用以下方法解决了这个问题：courseEndDate？“红色”：“灰色”，}}>{item.title}

<h4 style={{ color: TodayDate > courseEndDate ? "red" : "grey",}} > {item.title} </h4>