JSX 花括號內的 if 和 else if 語句

Question

我正在嘗試在 JSX 花括號中添加一個if else語句，例如：

<div>
  {
    if (condition) {
      <h1>FOO</h1>
    } else {
      <h2>BAR</h1>
    }
  }
</div>

見這里。

但我收到了這個錯誤。

Answer 1

你不能在 JSX 中使用 if 關鍵字。 所以要解決你的問題

{
  post.weather[0].main === "Haze" && <WiDayHaze size={100} color="black">
  post.weather[0].main === "Sunny" && <WiSunrise size={100} color="black">
}