意外的模板字符串表达式答案

【问题标题】：Unexpected template string expression意外的模板字符串表达式
【发布时间】：2021-05-19 23:52:15
【问题描述】：

我从教程中学习，想制作ProductScreen.js和Product.js，结果出现了这个警告，是什么问题？

product.js

import React from 'react'
import Rating from './Rating';

export default function Product(props) {
    const {product} = props;

    return (
        <div key={product._id} className="card">
        <a href= '/product/${product._id}'> // Line 9                  
            <img className="medium" src={product.image} alt={product.name} />
        </a>
        <div className="card-body">
        <a href='/product/${product._id}'>  //Line 13
                <h2>{product.name}</h2>
            </a>
           <Rating 
           rating={product.rating} 
           numReviews={product.numReviews}
           ></Rating>
            <div className="price">{product.price}lv</div>
        </div>
    </div>
    )
}

【问题讨论】：

看起来您对这些字符串使用了错误的引号字符。另外我认为你不需要周围的{ }

标签： javascript node.js reactjs

【解决方案1】：

您使用的 JS 模板文字错误。见https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals。

你想要的是：

`/product/${product._id}`

// and

`/product/${product._id`

// Note the backticks "`" instead of single quote marks "'"

【讨论】：

我在我的代码中更改了它，但我再次遇到此错误。我更新了代码。
@nik_kolev 你还没有正确的引号
是的，我的错。有用。谢谢你:)

【解决方案2】：

我看到您在模板中使用了不正确的引号。必须有`

【讨论】：

输入一个单独的代码风格的反引号很棘手。编辑您的帖子并用<code> 标记包围反引号。