详解如何在React中执行条件渲染

import React, { useState } from 'react';

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

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

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

  return (
    <div>
      {isLoggedIn ? (
        <div>
          <h1>欢迎回来！</h1>
          <button onClick={handleLogout}>退出</button>
        </div>
      ) : (
        <div>
          <h1>请登录</h1>
          <button onClick={handleLogin}>登录</button>
        </div>
      )}
    </div>
  );
}

export default App;

import React, { useState } from 'react';

function App() {
  const [showMessage, setShowMessage] = useState(false);

  return (
    <div>
      <button onClick={() => setShowMessage(!showMessage)}>切换消息</button>
      {showMessage && <h1>消息已显示！</h1>}
    </div>
  );
}

export default App;

import React, { useState } from 'react';

function App() {
  const [userRole, setUserRole] = useState('guest');

  const renderContent = () => {
    if (userRole === 'admin') {
      return <h1>欢迎，管理员！</h1>;
    } else if (userRole === 'user') {
      return <h1>欢迎，用户！</h1>;
    } else {
      return <h1>欢迎，访客！</h1>;
    }
  };

  return (
    <div>
      {renderContent()}
      <button onClick={() => setUserRole('admin')}>登录为管理员</button>
      <button onClick={() => setUserRole('user')}>登录为用户</button>
      <button onClick={() => setUserRole('guest')}>登录为访客</button>
    </div>
  );
}

export default App;

import React from 'react';

function App() {
  const items = [
    { id: 1, name: 'Item 1', available: true },
    { id: 2, name: 'Item 2', available: false },
    { id: 3, name: 'Item 3', available: true },
  ];

  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>
          {item.name} {item.available ? '(可用)' : '(已售罄)'}
        </li>
      ))}
    </ul>
  );
}

export default App;