react针对不同类型，渲染不同组件

业务中遇到一个场景是，不同类型，渲染不同组件，一开始使用的是switch ，代码很不优雅
可以使用策略模式优化

const PRODUCT = {
    CUSTOMIZE: {
        label: '自定义',
       value: 'customize',
    },
    SYSTEM: {
       label: '系统',
       value: 'system',
    },
}


const Details = ({ type, ...props }) => {
  const renderContentByType = {
    [PRODUCT.CUSTOMIZE.value]: {
      callback: ({ dataSource, onChange, form }) => <Customize dataSource={dataSource} onChange={onChange} form={form} />,
    },
    [PRODUCT.SYSTEM.value]: {
      callback: ({ dataSource, onChange, form }) => <ImgTitle dataSource={dataSource} onChange={onChange} form={form} />,
    },
  };

  return (
    <div>
      {
        renderContentByType[type] &&
         renderContentByType[type].callback({ ...props })
      }
    </div>
  );
};