如何基于条件呈现不同的元素(react jsx)

function App() {
  const isLoggedIn = true;

  return (
    <div>
      {isLoggedIn ? (
        <p>Welcome, user!</p>
      ) : (
        <p>Please log in.</p>
      )}
    </div>
  );
}

function App() {
  const role = 'admin';

  let element;
  if (role === 'admin') {
    element = <p>Welcome, admin user!</p>;
  } else if (role === 'user') {
    element = <p>Welcome, regular user!</p>;
  } else {
    element = <p>Please log in.</p>;
  }

  return <div>{element}</div>;
}