React 條件渲染不起作用

Question

我正在用 React 編寫一個待辦事項應用程序。 在底部，我給出了待辦事項到期的日期。 如果是今天到期，是紅色的，如果不是，是正常的。 如果今天到期，我給小日子 class “dueToday”。 這也有效：

<small className="dueToday">2021-11-24</small>
<small>2021-11-25</small>

在我的 CSS 我有以下代碼：

small .dueToday {
 /* color: rgb(160,84,112); */
 color: red;
}

在瀏覽器中它看起來像這樣：截圖

反應代碼：

{todos.map((todo) => (
  <div
    key={todo.id}
    className="todo"
    onClick={() => deleteTodo(todo.id)}
  >
    <h3>{todo.title}</h3>
    {todo.due !=
    `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}` ? (
      <small>{todo.due}</small>
    ) : (
      <small className="dueToday">{todo.due}</small>
    )}
  </div>
))}

Answer 1

您的問題是您正在尋找一個帶有 class .dueToday的內部項目的small標簽，您應該檢查一個帶有.dueToday class 的small標簽，為此只需刪除 Z2C56C360580420D293D 選擇器中的空格，如 this

small.dueToday {
 /* color: rgb(160,84,112); */
 color: red;
}