意外的令牌，React 组件中的预期")"(if 语句)

Question

我试图在功能组件中创建一个变量和一个for循环来显示产品中的评级星级，但当我试图编译它时，它一直给我相同的错误:

SyntaxError: Rating.js: Unexpected token, expected ")" 
for(let i=0; i<4; i++)
{
if({value}>i && {value}<i+1) {
^ 
stars.push(
<i
key={i}

我不知道你是否可以在函数组件中放入一个for循环，如果有一些我不知道我不应该做的额外的事情，或者如果我真的有语法错误。

组件的完整代码:

import React from 'react'
const Rating = ({value, text, color}) => {
let stars = [];
for(let i=0; i<4; i++) 
{
if({value}>i && {value}<i+1) { //<-- 
stars.push(
<i 
key={i}
style={{color}}
className={
'fas fa-star-half-alt'
}
/>

)}  else if({value}>i) {
stars.push(
<i 
key={i}
style={{color}}
className={
'fas fa-star'
}
/>
)} else {
stars.push(
<i 
key={i}
style={{color}}
className={
'far fa-star'
}
/>
)
}
}
return (
<div className='rating'>
<span> 
{stars}
</span>
</div>
)
}
export default Rating

Answer 1

您以错误的方式使用插值的根本原因。你不需要在你的JSX模板之外使用{}，这就是为什么JS指责{value}你的if语句是JS代码，你需要使用{}当你想嵌入一些JS值到你的JSX模板，例如<span>{value}</span>

import React from 'react'
const Rating = ({value, text, color}) => {
let stars = [];
for(let i=0; i<4; i++) 
{
if(value > i && value < i+1) {
stars.push(
<i 
key={i}
style={{color}}
className={
'fas fa-star-half-alt'
}
/>

)}  else if( value > i) {
stars.push(
<i 
key={i}
style={{color}}
className={
'fas fa-star'
}
/>
)} else {
stars.push(
<i 
key={i}
style={{color}}
className={
'far fa-star'
}
/>
)
}
}
return (
<div className='rating'>
<span> 
{stars}
</span>
</div>
)
}
export default Rating