reactjs - 出现错误：Expression expected.ts(1109) React js

Question

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

我Expression expected.ts(1109)在 switch 关键字下的第 5 行出现错误。

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

Answer 1

您不能将switch语句用作表达式。而没有函数体的箭头函数需要在 fat arrow 之后表达=>。

您需要将函数体包装在大括号中{...}，并为每个组件添加 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;
   };
};