如何重新呈现不同的React功能组件？

function App() {
  const isLoggedIn = true;

  return (
    <div>
      {isLoggedIn ? <WelcomeUser /> : <Login />}
    </div>
  );
}

function App() {
  const users = [
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' },
    { id: 3, name: 'Charlie' }
  ];

  return (
    <div>
      {users.map(user => (
        <User key={user.id} name={user.name} />
      ))}
    </div>
  );
}

function withLogging(WrappedComponent) {
  return class extends React.Component {
    componentDidMount() {
      console.log('Component has been mounted.');
    }

    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
}

const EnhancedComponent = withLogging(MyComponent);

function App() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  useEffect(() => {
    // 在isModalOpen状态改变时执行一些操作
  }, [isModalOpen]);

  return (
    <div>
      {isModalOpen ? <Modal /> : <Button onClick={() => setIsModalOpen(true)}>Open Modal</Button>}
    </div>
  );
}