如何在React App中实现组件的工厂模式？

import React from 'react';

// 创建一个工厂函数，接受参数type和props，返回相应的组件
const ComponentFactory = (type, props) => {
  // 根据type参数生成不同的组件
  switch (type) {
    case 'Button':
      return <button {...props}>Button</button>;
    case 'Input':
      return <input {...props} />;
    case 'Text':
      return <p {...props}>Text</p>;
    default:
      return null;
  }
};

// 在组件中使用工厂函数生成组件
const App = () => {
  // 使用工厂函数生成Button组件
  const ButtonComponent = ComponentFactory('Button', { onClick: () => console.log('Button clicked') });

  // 使用工厂函数生成Input组件
  const InputComponent = ComponentFactory('Input', { type: 'text', placeholder: 'Enter text' });

  // 使用工厂函数生成Text组件
  const TextComponent = ComponentFactory('Text', { style: { color: 'red' } });

  return (
    <div>
      {ButtonComponent}
      {InputComponent}
      {TextComponent}
    </div>
  );
};

export default App;