JSX中使用三元表达式报错Unexpected token "?" 如何解决？

你代码的语法错误来自map回调内多余嵌套的一层花括号：
当前你给map的箭头函数用了()包裹返回值，属于隐式返回写法，括号内直接写表达式即可，不需要额外加{}。这层多余的{}会被JS引擎解析为对象字面量的声明，对象要求key: value的语法结构，而你写的shouldRenderPlanA ?不符合该规则，因此抛出「期望得到冒号:」的错误。

另外你代码第一行的{options.map(option)}也存在语法问题，map方法缺少回调函数的参数与返回值定义，需要同步补全。

去掉map回调内三元表达式外层多余的花括号即可，参考代码如下：

return (
  <>
    {/* 请补全options.map的回调逻辑 */}
    {options.map((option) => /* 此处写你要渲染的对应内容 */)}
    <StyledRow>
      {variousOptions.map((opt) => (
        // 已删除多余的外层花括号
        shouldRenderPlanA ? (            
          <StyledLabelOptionOne
             variousProps={variousProps}
          />
          ) : (            
          <StyledLabelOptionTwo
             variousProps={variousProps}
          />
        )
      ))}
    </StyledRow>
  </>
);

如果习惯使用箭头函数显式返回的写法，也可以改成如下格式：

variousOptions.map((opt) => {
  // 用花括号包裹函数体时，需要手动写return返回渲染内容
  return shouldRenderPlanA ? (
    <StyledLabelOptionOne variousProps={variousProps} />
  ) : (
    <StyledLabelOptionTwo variousProps={variousProps} />
  )
})

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