如何在TypeScript中使用道具数组动态生成React组件？

import React from 'react';

interface Props {
  components: Array<{ name: string, props: any }>;
}

const ParentComponent: React.FC<Props> = ({ components }) => {
  return (
    <div>
      {components.map((component, index) => (
        <ChildComponent key={index} name={component.name} props={component.props} />
      ))}
    </div>
  );
};

interface ChildProps {
  name: string;
  props: any;
}

const ChildComponent: React.FC<ChildProps> = ({ name, props }) => {
  // 根据name和props生成对应的组件
  // 例如，可以使用switch语句根据name生成不同的组件
  switch (name) {
    case 'ComponentA':
      return <ComponentA {...props} />;
    case 'ComponentB':
      return <ComponentB {...props} />;
    // 其他组件的生成逻辑
    default:
      return null;
  }
};

const ComponentA: React.FC<any> = (props) => {
  // ComponentA的实现
  return <div>Component A</div>;
};

const ComponentB: React.FC<any> = (props) => {
  // ComponentB的实现
  return <div>Component B</div>;
};

export default ParentComponent;

const components = [
  { name: 'ComponentA', props: { propA: 'valueA' } },
  { name: 'ComponentB', props: { propB: 'valueB' } },
];

<ParentComponent components={components} />