使用typescript动态渲染react组件

import React, { ReactElement } from 'react';

interface ComponentProps {
  name: string;
}

const ComponentA: React.FC<ComponentProps> = ({ name }) => {
  return <div>Component A: {name}</div>;
};

const ComponentB: React.FC<ComponentProps> = ({ name }) => {
  return <div>Component B: {name}</div>;
};

const DynamicComponent: React.FC<ComponentProps> = ({ name }) => {
  // 根据条件动态选择要渲染的组件
  const isComponentA = name === 'A';

  // 根据条件动态生成组件
  const Component: React.FC<ComponentProps> = isComponentA ? ComponentA : ComponentB;

  return <Component name={name} />;
};

const App: React.FC = () => {
  return (
    <div>
      <DynamicComponent name="A" />
      <DynamicComponent name="B" />
    </div>
  );
};

export default App;