解析错误：意外的令牌，预期的“...”

Posted 2023-03-27

【中文标题】解析错误：意外的令牌，预期的“...”

【英文标题】：Parsing error: Unexpected token, expected "..."

【发布时间】：2021-10-17 19:44:19

【问题描述】：

我在组件中有这个带有模板文字的代码，我从 ESLint 得到解析错误。我尝试使用 @babel/eslint-parser 但它没有帮助。还有这个解析错误：Unexpected token, expected "..." I have '...' expected.ts(1005)

import React from "react";
import  Link  from "react-router-dom";
import logo from "../../images/logo_cl.png";

function Comptetition( competition ) 
    return (
        <Link to `/competitions/$competition.id`>
            <li className="complist__item">
                <img className="complist__item-image" src=logo  />
                <p className="complist__item-name">competition.name</p>
                <p className="complist__item-country">competition.area.name</p>
            </li>
        </Link>
        
    );


export default Comptetition;

我的 .eslintrc.json 看起来像这样：

    
  "env": 
    "browser": true,
    "jest": true,
    "es6": true,
    "node": true
  ,
  "plugins": [
    "import",
    "react"
  ],
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "airbnb-base",
    "plugin:prettier/recommended"
  ],
  "parser": "@babel/eslint-parser",
  "parserOptions": 
    "ecmaVersion": 12,
    "sourceType": "module",
    "requireConfigFile": false,
    "ecmaFeatures": 
      "jsx": true,
      "modules": true
    ,
    "babelOptions": 
      "presets": [
        "@babel/preset-react"
      ]
    
  ,
  "rules": 
    "semi": "error",
    "no-console": "warn",
    "no-eval": "error",
    "import/first": "error",
    "prefer-template": 1,
    "no-param-reassign": [
      2,
      
        "props": false
      
    ]
  

我已经阅读了大量信息，但无法在 VScode 中解决此错误

【问题讨论】：

你可以为你的问题创建codeandbox链接吗？

@NishargShah 在这里：codesandbox.io/s/mystifying-fog-4i3ih

【参考方案1】：

从代码看来，您查看的是正确的行但位置错误。

你缺少一个“=”来表示链接的“to”属性

<Link to=`/competitions/$competition.id`>

【讨论】：

哦.. 非常感谢，只是错过了）

【参考方案2】：

您忘记在to 中添加=

to=`/competitions/$competition.id`

【讨论】：

@Aresz 如果您喜欢我的回答或者您从我的回答中得到任何帮助，请不要忘记考虑投票并通过单击右箭头将此答案作为您的最佳答案，谢谢！