意外的模板字符串表达式 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&nbsp;value={product.rating}&nbsp;text={`${product.numReviews}reviews`}/>