条件渲染

在 React 中，没有专门的语句用于写条件语句。你只需使用常规 JavaScript 代码的写法即可。比如，你可以使用 if 语句来有条件地包含 JSX：

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

如果想要更紧凑的话，可以使用 ? 条件（三元）运算符。与 if 不同，它可以在 JSX 内部使用：

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

如果不需要 else 分支的话，还可以使用更简短的逻辑与 && 语法：

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

以上方法也同样适用于有条件地设置属性。如果对这些 JavaScript 语法不熟悉的话，可以只使用 if..else 语法。