如何在该场景下用map替代switch实现组件映射

你可以用对象映射的方式替代原有switch逻辑，这种写法更简洁，后续加新分支也只需要在映射对象里加键值对，比硬编码switch好维护。

实现方式一：直接存储组件实例 #

适合不需要动态传props的场景：

// 先定义分支对应的组件映射
const categoryComponentMap = {
  1: <SalePriceCtg />,
  2: <ArticlesCtg />
};

const wCategory = () => {
  // 取对应组件，没有则返回默认值
  return categoryComponentMap[categoryhovered] || <div>smth3</div>;
};

实现方式二：存储组件引用（更灵活） #

如果后续需要给组件传props，这种方式更方便：

// 存储组件的引用而非实例
const categoryComponentMap = {
  1: SalePriceCtg,
  2: ArticlesCtg
};

const wCategory = () => {
  const TargetComponent = categoryComponentMap[categoryhovered];
  // 存在则渲染组件，否则返回默认内容
  return TargetComponent ? <TargetComponent /> : <div>smth3</div>;
};
// 要是需要传props，直接在<TargetComponent />里加就行，比如<TargetComponent foo="bar" />

注意事项 #

• 确保categoryhovered的类型和映射对象的key一致（比如这里是数字类型，要是后端返回字符串，记得把map的key改成字符串"1"、"2"）
• 后续新增分类时，只需要在categoryComponentMap里新增对应的键值对，不用修改函数逻辑，扩展性更强

内容的提问来源于stack exchange，提问作者Farshad Momtaz