在状态改变时交换ReactJS功能组件

import React, { useState } from 'react';

function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  const handleLogin = () => {
    setIsLoggedIn(true);
  };

  const handleLogout = () => {
    setIsLoggedIn(false);
  };

  return (
    <div>
      {isLoggedIn ? (
        <LoggedInComponent onLogout={handleLogout} />
      ) : (
        <LoginComponent onLogin={handleLogin} />
      )}
    </div>
  );
}

function LoginComponent({ onLogin }) {
  return (
    <div>
      <h2>Login Component</h2>
      <button onClick={onLogin}>Login</button>
    </div>
  );
}

function LoggedInComponent({ onLogout }) {
  return (
    <div>
      <h2>Logged In Component</h2>
      <button onClick={onLogout}>Logout</button>
    </div>
  );
}

export default App;