意外的模板字符串表达式字符串中没有模板卷曲

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>
<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

Answer 1

使用backtick(string template literal(而不是单引号，像下面的一样尝试

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