如何在react中设置组件的条件属性

function MyComponent({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <UserGreeting /> : <GuestGreeting />}
    </div>
  );
}

function MyComponent({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn && <UserGreeting />}
    </div>
  );
}

function MyComponent({ userRole }) {
  const renderContent = () => {
    switch (userRole) {
      case 'admin':
        return <AdminContent />;
      case 'user':
        return <UserContent />;
      default:
        return <DefaultContent />;
    }
  };

  return (
    <div>
      {renderContent()}
    </div>
  );
}

function withAuth(Component) {
  return function WrappedComponent(props) {
    const user = useContext(AuthContext);
    return user ? <Component {...props} /> : null;
  };
}

const AuthenticatedComponent = withAuth(MyComponent);