React:如何根据点击的MenuItem渲染组件？

import React, { useState } from 'react';

// 假设这是我们要渲染的组件
const ComponentA = () => <div>Component A</div>;
const ComponentB = () => <div>Component B</div>;
const ComponentC = () => <div>Component C</div>;

const MenuItem = ({ label, onClick }) => (
  <button onClick={onClick}>{label}</button>
);

const App = () => {
  const [selectedComponent, setSelectedComponent] = useState(null);

  const handleMenuItemClick = (component) => {
    setSelectedComponent(component);
  };

  return (
    <div>
      <h1>React Conditional Rendering Example</h1>
      <div>
        <MenuItem label="Component A" onClick={() => handleMenuItemClick(ComponentA)} />
        <MenuItem label="Component B" onClick={() => handleMenuItemClick(ComponentB)} />
        <MenuItem label="Component C" onClick={() => handleMenuItemClick(ComponentC)} />
      </div>
      <div>
        {selectedComponent && <selectedComponent />}
      </div>
    </div>
  );
};

export default App;