在React中条件呈现和包装两个或多个具有相同类型的元素

function Greeting({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign up.</h1>}
    </div>
  );
}

function Notification({ hasUnreadMessages }) {
  return (
    <div>
      {hasUnreadMessages && <span>You have unread messages!</span>}
    </div>
  );
}

function List({ items }) {
  return (
    <ul>
      {items.map((item) => (
        <React.Fragment key={item.id}>
          <li>{item.name}</li>
          <li>{item.description}</li>
        </React.Fragment>
      ))}
    </ul>
  );
}

function Form() {
  return [
    <input type="text" name="firstName" />,
    <input type="text" name="lastName" />,
    <input type="email" name="email" />,
  ];
}