React中switch case未按传入type prop正确渲染组件如何解决？

• 核心错误是switch...case的语法使用不符合规范：switch关键字后面括号内的表达式会和每个case后面的表达式结果做全等比较（===），你在case后写的type == 1、type ===3这类比较语句的返回结果是布尔值（true/false），和你传入的数字类型的type永远不会匹配，因此会直接走到default分支。
• 另外你前两个case用的是双等==，后两个是三等===，逻辑不统一，也容易出现隐式类型转换的隐患。

修正后的notificationComponent逻辑如下，case后直接写要匹配的type值即可，同时返回结果相同的case3和case4可以合并简化：

const notificationComponent = (type) => {
    switch (type) {
      case 1:
        return <Text>1</Text>;
      case 2:
        return <Text>2</Text>;
      case 3:
      case 4:
        return <Text>3</Text>;
      default:
        return <Text>No project</Text>;
    }
};

如果匹配逻辑不复杂，也可以用对象映射替代switch case，可读性更强：

const notificationMap = {
  1: <Text>1</Text>,
  2: <Text>2</Text>,
  3: <Text>3</Text>,
  4: <Text>3</Text>
}
// 使用时直接取值，兜底用默认值
const notificationComponent = (type) => notificationMap[type] ?? <Text>No project</Text>

内容的提问来源于stack exchange，提问作者Roger Staxx