React函数组件if语句报Unexpected token, expected ")"错误如何解决

你遇到的报错是纯语法错误，和React函数组件是否支持for循环无关，函数组件内完全可以正常使用for循环生成JSX元素数组。

错误的核心原因是：在普通JS逻辑代码中误用了JSX专属的变量包裹语法{}

{} 语法仅适用于在JSX标签内部嵌入动态变量/表达式，在常规的JS逻辑（如if条件判断、for循环条件、普通变量运算）中，直接使用变量名即可，不需要额外包裹{}。

你代码里if({value}>i && {value}<i+1)和else if({value}>i)的写法，相当于在if条件里创建了匿名对象{value: value}，用对象和数字做比较的写法不符合JS语法规范，因此触发编译报错。

import React from 'react'

const Rating = ({value, text, color = '#f8e825'}) => {
  let stars = [];
  // 常规星级评分是5星，你原来写的i<4是4星，可根据需求调整
  for(let i=0; i<5; i++) {
    if(value > i && value < i+1) {
      stars.push(
        <i 
          key={i}
          style={{color}}
          className='fas fa-star-half-alt'
        />
      )
    } else if(value >= i+1) {
      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>
      <span>{text && text}</span>
    </div>
  )
}

export default Rating

• 给color参数设置默认值，避免不传的时候样式失效
• 补充评分文本的展示逻辑，充分利用传入的text参数
• 可以把循环逻辑替换为Array.from写法，代码更简洁：

const stars = Array.from({length: 5}, (_, i) => {
  // 同上的判断逻辑，return对应的i标签即可
})

内容的提问来源于stack exchange，提问作者limonultra