React中JSX return报Unexpected token, expected "," 错误怎么解决？

• React组件return后的圆括号内直接写JS表达式时，不需要额外包裹{}。{}仅用于在JSX标签内部插入JS逻辑的场景。
• 你当前代码在return (后直接写了{props.userInfo ? ...}，JS解析器会把这层{}识别为对象字面量，尝试解析props.userInfo为对象的键，遇到后面的.自然不符合对象语法，就抛出了「期望逗号」的错误。

直接删除外层多余的{}即可，修改后的代码如下：

export default function RequestorEligibilitySection(props) {

// Return JSX
// ----------

return (
    props.userInfo ?
    <>
        {props.small 
         ? 
            <h3>
                {props.userInfo.organizationalstat === 'EMPLOYEE' ? 'Employee' : 'Trainee'} Eligibility
            </h3> 
         : 
            <h2>
                {props.userInfo.organizationalstat === 'EMPLOYEE' ? 'Employee' : 'Trainee'} Eligibility
            </h2>
        }
        <p>Some text</p>
    </>
    : ''
);
}

如果更习惯所有逻辑都放在JSX内部的写法，也可以在外层套一层空标签<> </>，再在内部用{}包裹逻辑：

return (
  <>
    {props.userInfo ?
      <>
        {props.small 
         ? 
            <h3>
                {props.userInfo.organizationalstat === 'EMPLOYEE' ? 'Employee' : 'Trainee'} Eligibility
            </h3> 
         : 
            <h2>
                {props.userInfo.organizationalstat === 'EMPLOYEE' ? 'Employee' : 'Trainee'} Eligibility
            </h2>
        }
        <p>Some text</p>
    </>
    : ''}
  </>
);

两种写法都可以正常运行，按照团队代码风格选择即可。

内容的提问来源于stack exchange，提问作者gene b.