REACT JS如何在单击时显示一个组件并隐藏其他组件

import React, { useState } from 'react';

// 组件A
const ComponentA = () => {
  return <div>Component A</div>;
};

// 组件B
const ComponentB = () => {
  return <div>Component B</div>;
};

// 父组件
const ParentComponent = () => {
  const [activeComponent, setActiveComponent] = useState('A');

  const handleClick = (component) => {
    setActiveComponent(component);
  };

  return (
    <div>
      <button onClick={() => handleClick('A')}>Show Component A</button>
      <button onClick={() => handleClick('B')}>Show Component B</button>

      {activeComponent === 'A' && <ComponentA />}
      {activeComponent === 'B' && <ComponentB />}
    </div>
  );
};

export default ParentComponent;