JSX 花括号内的 if 和 else if 语句

Question

我正在尝试将 if else 语句放在 JSX 花括号中，例如：

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

见here。

但我收到了 this error。

Answer 1

你不能在 JSX 中使用 if 关键字。所以为了解决你的问题

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