如何基于选定的索引动态访问和呈现数组中的组件？

import React from 'react';

// 定义一些示例组件
const ComponentA = () => <div>Component A</div>;
const ComponentB = () => <div>Component B</div>;
const ComponentC = () => <div>Component C</div>;

// 定义一个组件映射
const componentMap = {
  0: ComponentA,
  1: ComponentB,
  2: ComponentC
};

const DynamicComponent = ({ index }) => {
  // 根据索引获取对应的组件
  const Component = componentMap[index];

  // 如果没有找到对应的组件，返回一个默认组件或错误信息
  if (!Component) {
    return <div>Component not found</div>;
  }

  // 渲染对应的组件
  return <Component />;
};

const App = () => {
  const selectedIndex = 1; // 假设选定的索引是1

  return (
    <div>
      <h1>Dynamic Component Example</h1>
      <DynamicComponent index={selectedIndex} />
    </div>
  );
};

export default App;