Javascript 意外的模板字符串表达式字符串中没有模板卷曲 从“React”导入React 从“react router dom”导入{Link} 从“react bootstrap”导入{行、列、图像、列表组、卡、按钮} 从“../components/Rating”导入评级 从“../products”导入产品 const ProductScreen=（{match}）=>{ const product=products.find（p=>p._id=match.params.id） 返回( 回去 {product.name} 价格：${product.price} 描述：{product.Description} 价格： ${product.price} 地位： {product.countInStock>0？'In stock'：'Out stock'} 添加到购物车 ) } 导出默认产品屏幕

使用反勾号（

字符串模板文字

）代替单引号，尝试如下操作

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>
    <strong>${product.price}</strong>
                                  </Col>
                              </Row>
                          </ListGroup.Item>
                          <ListGroup.Item>

                          <Row>
                                  <Col>
                                  Status:
                                  </Col>
                                  <Col>
    {product.countInStock > 0 ?'In stock': 'Out of Stock'}
                                  </Col>
                              </Row>
                          </ListGroup.Item>

                          <ListGroup.Item>
                              <Button className='btn-block' type='button' disabled={product.countInStock === 0}
                              >
                                  Add To Cart
                              </Button>
                          </ListGroup.Item>
                      </ListGroup>
                  </Card>
              </Col>
           </Row>
        </>
    )
}

export default ProductScreen

您希望`${product.numReviews}评论`后面打勾，而不是一个引号。谢谢，这解决了我的错误。嗨，这里也是p=>p。_id=match.params.id，我想您缺少==，p=>p。_id===match.params。id@Anas如果问题已解决，请接受答案。

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