条件渲染使用 if 语句根据条件引入 JSX。

let content;
if (isLoggedIn) {
  content = <AdminPanel />;
} else {
  content = <LoginForm />;
}
return (
  <div>
    {content}
  </div>
);

使用 条件 ? 运算符。与 if 不同的是，它工作于 JSX 内部。

<div>
  {isLoggedIn ? (
    <AdminPanel />
  ) : (
    <LoginForm />
  )}
</div>

还可以使用 逻辑 && 语法。

<div>
  {isLoggedIn && <AdminPanel />}
</div>