如何在React中有条件地呈现初始加载的不同组件？

在React中，可以使用条件渲染来有条件地呈现初始加载的不同组件。条件渲染是根据特定条件来决定是否渲染组件或组件的一部分。

一种常见的条件渲染方式是使用条件语句（如if语句）来判断条件，并根据条件的结果来决定渲染哪个组件。以下是一个示例：

import React from 'react';

function App() {
  const isLoggedIn = true; // 假设用户已登录

  if (isLoggedIn) {
    return <WelcomeUser />;
  } else {
    return <Login />;
  }
}

function WelcomeUser() {
  return <h1>Welcome, User!</h1>;
}

function Login() {
  return <h1>Please log in.</h1>;
}

export default App;

在上面的示例中，根据isLoggedIn变量的值，决定渲染WelcomeUser组件还是Login组件。如果isLoggedIn为true，则渲染WelcomeUser组件，否则渲染Login组件。

另一种常见的条件渲染方式是使用三元表达式来实现。以下是一个示例：

import React from 'react';

function App() {
  const isLoggedIn = true; // 假设用户已登录

  return (
    <div>
      {isLoggedIn ? <WelcomeUser /> : <Login />}
    </div>
  );
}

function WelcomeUser() {
  return <h1>Welcome, User!</h1>;
}

function Login() {
  return <h1>Please log in.</h1>;
}

export default App;

在上面的示例中，使用三元表达式isLoggedIn ? <WelcomeUser /> : <Login />来根据isLoggedIn变量的值来决定渲染哪个组件。

这些示例展示了如何在React中有条件地呈现初始加载的不同组件。根据具体的业务需求和条件，可以使用不同的条件渲染方式来实现。