React条件渲染报错：Unexpected token，请求排查解决

核心错误原因 #

你遇到的解析错误，本质是JSX中JavaScript表达式的语法书写不规范，常见场景包括：

• 动态属性值未用{}包裹：React中JSX内的逻辑代码必须用大括号包裹，直接写key>user.col会被当成字符串解析，导致语法识别失败。
• 变量名混淆：如果把map回调的参数命名为key，容易和React的key特殊属性混淆，增加语法解析的歧义。
• 表达式嵌套或运算符书写不严谨：比如括号配对错误、运算符前后的语法衔接问题。

正确写法示例 #

以下是两种可行的修正方案，以遍历生成option为例：

方案1：提前计算判断条件 #

{[1, 2, 3, 4, 5].map((num) => {
  // 提前计算用户的col值，避免重复逻辑
  const userCol = user?.col ?? -1;
  return (
    <option 
      key={num} 
      disabled={num > userCol}
    >
      选项{num}
    </option>
  );
})}

方案2：直接在属性中写表达式 #

{[1, 2, 3, 4, 5].map((num) => (
  <option 
    key={num} 
    disabled={num > (user?.col ?? -1)}
  >
    选项{num}
  </option>
))}

关键注意事项 #

1. 必须用{}包裹动态逻辑：所有需要计算的属性值（比如disabled的判断条件）都要放在大括号里，否则React会把内容当成普通字符串解析，触发语法错误。
2. 避免变量名冲突：不要把map回调的第二个参数（索引）命名为key，建议用index或具体业务变量名（比如示例中的num），避免和React的key属性混淆。
3. 确认user的作用域：确保user变量在当前组件范围内可访问（比如是组件的state、props或已定义的变量），否则会引发user is not defined的错误，可能被控制台的语法错误提示掩盖。

错误写法对比（避坑参考） #

• 错误：未用大括号包裹表达式

<option key={num} disabled=num > (user?.col ?? -1) </option>

这种写法会让React把num当成字符串，>会被解析成JSX标签的一部分，直接触发Unexpected token错误。

• 错误：误用key作为变量名

{[1,2,3].map((item, key) => (
  <option key={key} disabled={key > (user?.col ?? -1)}>选项{item}</option>
))}

虽然语法上合法，但key作为map的索引变量，容易和React的key属性混淆，增加代码维护成本。

内容的提问来源于stack exchange，提问作者Dheeraj Kumar Yadav