业务中遇到一个场景是，不同类型，渲染不同组件，一开始使用的是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>
);
};
