在 React 中实现条件渲染的七种方法

条件渲染方式

一、if 语句

先从 React 最基本的条件类型来看。如果有数据就显示组件，如果没有数据就不显示任何内容。posts 为需要渲染的列表：

export default function App() {
  const { posts } = usePosts();

  if (!posts) return null;

  return (
    <div>
      <PostList posts={posts} />
    </div>
  );
}

这种形式会生效的原因就是我们会提前返回，如果满足条件(posts 值不存在)，就通过return null 在组件中不显示任何内容。

如果有多个要检查的条件时，也可以使用 if 语句。例如，在显示数据之前检查加载和错误状态：

export default function App() {
  const { isLoading, isError, posts } = usePosts();   
  if (isLoading) return <div>Loading...</div>;
  if (isError) return <div>Error!</div>;
  return (
    <div>
      <PostList posts={posts} />
    </div>
  );
}

这里我们可以多次使用 if 语句，不需要再使用 else 或者 if-eles 语句，这样就减少了需要编写的代码，并且可读性更强。

二、三元运算符

当我们想提前退出或者什么都不显示时，if 语句会很有用。但是，如果我们不想写一个与返回的 JSX 分开的条件，而是直接在其中写呢?那就可以使用三元表达式来编写条件。

在 React 中，我们必须在 JSX 中包含表达式，而不是语句。这就是为什么我们在 JSX 中只能使用三元表达式，而不是 if 语句来编写条件。

例如，在移动设备的屏幕上显示一个组件，而在更大的屏幕上显示另一个组件，就可以使用三元表达式来实现：

export default function App() {
  const isMobile = useWindowSize()

  return (
    <main>
      <Header />
      {isMobile ? <MobileChat /> : <Chat />}
    </main>
  )
}

其实，不必将这些三元表达式包含在 JSX 中，可以将其结果分配给一个变量，然后在需要的地方使用即可：

export default function App() {
  const isMobile = useWindowSize();   
  const ChatComponent = isMobile ? <MobileChat /> : <Chat />;
  return (
    <main>
      <Header />
      <Sidebar />
      {ChatComponent}
    </main>
  )
}

三、&&运算符

在许多情况下，我们可能想要使用三元表达式，但是如果不满足条件，就不显示任何内容。那代码会是这样的：

condition ? <Component /> : null.