错误：表达式期望值ts1109React js

问题描述

我正在尝试制作井字游戏，但不幸的是，在switch语句下出现错误。

1.import React from 'react';
2.import {FaTimes,FaPen,FaRegCircle} from 'react-icons/fa';
3.
4.const Icon = ({name}) =>(
5.  ***switch*** (name) {
6.        case "cirle":
7.            <FaRegCircle className='icons'></FaRegCircle>
            break;
        case "cross":
            <FaTimes className='icons'></FaTimes>
            break;
        default:
            <FaPen className='icons'></FaPen>
            break;
   };
);

export default Icon;

在第五行中，在switch关键字下显示Expression expected.ts(1109)时出现错误。

为什么会出现此问题以及如何解决？

解决方法

您不能使用switch语句作为表达式。并且没有功能体的箭头功能期望在粗箭头=>之后表达。

您需要将函数主体包裹在大括号{...}中，并为每个组件添加return关键字，如下所示：

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