React中实现使用条件渲染来显示不同的内容

import React, { useState } from 'react';

const LoginControl = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

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

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

  let button;
  if (isLoggedIn) {
    button = <button onClick={handleLogout}>Logout</button>;
  } else {
    button = <button onClick={handleLogin}>Login</button>;
  }

  return (
    <div>
      <h1>{isLoggedIn ? 'Welcome Back!' : 'Please Log In'}</h1>
      {button}
    </div>
  );
};

export default LoginControl;

import React, { useState, useEffect } from 'react';

const ItemList = () => {
  const [isLoading, setIsLoading] = useState(true);
  const [items, setItems] = useState([]);

  useEffect(() => {
    setTimeout(() => {
      setItems(['Apple', 'Banana', 'Cherry']);
      setIsLoading(false);
    }, 2000);
  }, []);

  return (
    <div>
      <h1>Item List</h1>
      {isLoading ? (
        <p>Loading...</p>
      ) : (
        <ul>
          {items.map(item => (
            <li key={item}>{item}</li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default ItemList;

import React, { useState } from 'react';

const WarningBanner = ({ warning }) => {
  if (!warning) {
    return null;
  }
  return <div className="warning">Warning!</div>;
};

const Page = () => {
  const [showWarning, setShowWarning] = useState(false);

  return (
    <div>
      <h1>Page Title</h1>
      <WarningBanner warning={showWarning} />
      <button onClick={() => setShowWarning(prev => !prev)}>
        Toggle Warning
      </button>
    </div>
  );
};

export default Page;