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">
}