在React中注册点击不同的组件

import React, { useState } from 'react';

// 子组件1
const Component1 = () => {
  return <div>组件1</div>;
};

// 子组件2
const Component2 = () => {
  return <div>组件2</div>;
};

// 父组件
const ParentComponent = () => {
  const [selectedComponent, setSelectedComponent] = useState(null);

  // 处理点击事件
  const handleClick = (component) => {
    setSelectedComponent(component);
  };

  return (
    <div>
      <button onClick={() => handleClick(Component1)}>选择组件1</button>
      <button onClick={() => handleClick(Component2)}>选择组件2</button>

      {selectedComponent === Component1 && <Component1 />}
      {selectedComponent === Component2 && <Component2 />}
    </div>
  );
};

export default ParentComponent;