意外的模板字符串表达式 no-template-curly-in-string

Question

import React from 'react'import {Link} from 'react-router-dom'import {Row,Col,Image,ListGroup,Card,Button} from 'react-bootstrap'import Rating from '../components/Rating'import products from '../products'const ProductScreen = ({match}) => {    const product=products.find(p=> p._id=match.params.id)        return (        <>           <Link className='btn btn-light my-3'to= '/'>Go Back</Link>           <Row>               <Col md ={6}>                   <Image src={product.image} alt={product.name} fluid/>               </Col>               <Col md ={3}>                     <ListGroup variant='flush'>                         <ListGroup.Item>                             <h3>                                 {product.name}                             </h3>                         </ListGroup.Item>                         <ListGroup.Item>                             <Rating value={product.rating} text={'${product.numReviews}reviews'}/>                         </ListGroup.Item>                         <ListGroup.Item>                             price: ${product.price}                         </ListGroup.Item>                         <ListGroup.Item>                             Description: {product.description}                         </ListGroup.Item>                     </ListGroup>               </Col>              <Col md={3}>                  <Card>                      <ListGroup variant='flush'>                          <ListGroup.Item>                              <Row>                                  <Col>                                  Price:                                  </Col>                                  <Col>

Answer 1

使用反引号（string template literal）而不是单引号，尝试如下

<Rating value={product.rating} text={`${product.numReviews}reviews`}/>