React自定义Icon组件switch语句case语法标红报错如何解决？

错误原因 #

• switch逻辑直接写在了<div>的JSX标签内部，不符合React JSX语法规范：JSX中嵌入JavaScript表达式/逻辑必须包裹在{}中，否则编辑器会将switch识别为普通文本内容，抛出expression expected错误。
• switch语句本身语法存在多处错误：
  1. 缺少switch结构的闭合大括号}
  2. case 'crcle'分支下重复写了return语句，且crcle为拼写错误，正确应为circle

修复方案 #

完整可运行代码 #

首先确保你已经安装了react-icons依赖，且在文件顶部导入了对应的图标组件：

import { FaRegCircle, FaTimes, FaPen } from 'react-icons/fa';

const Icon = ({ name }) => {
  return (
    <div>
      {
        switch (name) {
          case 'circle':
            return <FaRegCircle className="Icons" />
          case 'cross':
            return <FaTimes className="Icons" />
          default:
            return <FaPen className="Icons" />
        }
      }
    </div>
  );
};
export default Icon;

补充优化建议 #

也可以直接去掉外层多余的<div>标签，代码更简洁：

import { FaRegCircle, FaTimes, FaPen } from 'react-icons/fa';

const Icon = ({ name }) => {
  switch (name) {
    case 'circle':
      return <FaRegCircle className="Icons" />
    case 'cross':
      return <FaTimes className="Icons" />
    default:
      return <FaPen className="Icons" />
  }
};
export default Icon;

内容的提问来源于stack exchange，提问作者jaydeep bhattacharya