React三元运算符写法报错求助：Unexpected token错误原因

你的三元运算符写法之所以报错，核心问题是三元运算符是表达式而非语句，它的两个分支必须返回具体的值，不能直接在分支里写return语句——return是独立的语句，不能出现在表达式的位置中，这就导致了语法解析时的"Unexpected token"错误。

正确的写法应该把return放在三元运算符的外层，让三元表达式返回对应的JSX元素，再由return输出：

function Goal(props){
    const isGoal = props.isGoal;        
    
    return isGoal ? <MadeGoal/> : <MissedGoal/>;
}

你也可以进一步简化代码，直接使用props.isGoal作为判断条件：

function Goal(props){
    return props.isGoal ? <MadeGoal/> : <MissedGoal/>;
}

而你参考的if语句写法能正常运行，是因为if属于语句结构，允许在分支块内使用return来终止函数并返回结果，和三元运算符的表达式逻辑完全不同。

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