出现错误：Expression expected.ts(1109) React js答案

【问题标题】：Getting Error: Expression expected.ts(1109) React js出现错误：Expression expected.ts(1109) React js
【发布时间】：2020-12-18 15:52:54
【问题描述】：

我正在尝试制作井字游戏，但不幸的是，我在 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;

我在第 5 行收到一个错误，在 switch 关键字下显示 Expression expected.ts(1109)。

为什么会出现这个问题，我该如何解决？？

【问题讨论】：

您没有退回组件...添加 return <FaRegCircle className='icons'></FaRegCircle> 和其余部分

标签： reactjs expression react-icons

【解决方案1】：

您不能将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;
   };
};

【讨论】：