找不到此 switch 語句的問題所在它總是在我的 VS 代碼編輯器中顯示紅色下划線以防萬一語法

Question

//我想在我的項目中添加一些圖標來制作一個 tik-tak-toe 應用程序，所以寫了這段代碼，簡單地制作了一個圖標 function，然后將語句切換為圓圈、十字或鋼筆```

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

導出默認圖標；

[在此處輸入圖片描述][1]我是 ReactJs 的新手，我想使用 React 構建一個 tik-take-toe 游戲，但是每當我將邏輯放在組件文件夾的 Icon.js 文件中時，我都會收到一個錯誤，顯示我的 switch case 的紅色下划線表示“預期的表達式”。 在 switch 中的 case 語句中，盡管我得到了錯誤```，但我什至驚訝地看到我寫的代碼與導師在教程中顯示的代碼完全相同

Answer 1

此處不能內聯 switch 語句。 您需要創建一個 function 並將 switch 語句放入其中。

JSX 中的任何 JavaScript 代碼都應該用{}包裹起來。

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

  return (
    <div>
      {renderIcon()}
    </div>
  );
};

export default Icon;