React 组件中的意外令牌，预期的“）”（if 语句）答案

【问题标题】：Unexpected token, expected ")" in React component (if statement)React 组件中的意外令牌，预期的“）”（if 语句）
【发布时间】：2021-10-12 07:30:15
【问题描述】：

我试图在功能组件内创建一个变量和一个 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

【问题讨论】：

删除 value 周围的 {}。另外，将其从 color 中删除。
{value} 是 JS 作用域中的对象字面量或新块作用域。您可能想要删除大括号。我的猜测是它认为 <i 是一些 JSX 的开始，添加适当的空格，即 < i + 。
@SimaAmini style={{color}} 是传递具有color 作为属性的对象作为prop 值的正确语法。
{value} 在 JSX 中用于将变量作为属性传递：<input value={value} />。在 JSX 之外，它是对象文字的快捷方式：{ "value": value }。
@DrewReese 你是对的！

标签： javascript node.js reactjs react-hooks

【解决方案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

【讨论】：