JSX 不接受三元语句（意外标记“？”）答案

【问题标题】：Ternary statement not accepted in JSX (Unexpected token "?")JSX 不接受三元语句（意外标记“？”）
【发布时间】：2021-09-28 16:35:16
【问题描述】：

使用三元语句根据shouldRenderPlanA 属性（解析真或假）呈现不同的JSX。然而，问题是shouldRenderPlanA 三元检查出现错误，内容如下：

“非预期令牌?，应为令牌:”

谁能解释我哪里出错了？ TIA

    return (
      <>
        {options.map(option)}
        <StyledRow>
          {variousOptions.map((opt) => (
            {shouldRenderPlanA ? (            
              <StyledLabelOptionOne
                 variousProps={variousProps}
              />
              ) : (            
              <StyledLabelOptionTwo
                 variousProps={variousProps}
              />
            )}
          ))}
        </StyledRow>
      </>
    );

我怀疑这与地图内部发生的检查有关？

【问题讨论】：

这是因为你在已经在 JS 上下文中时使用过大括号。您正在编写一个返回对象的箭头函数，在这种情况下，? 后面的键名是没有意义的。
您正在尝试在 JSX 之外使用 JSX 语法。 => ( 和 <StyledLabelOptionOne 之间的所有内容都是普通的 javascript。所以你需要用return替换{
将其包装在一个新元素中
意外令牌? 错误是因为 js（不是 jsx）认为您正在尝试声明一个对象字面量。期待:

标签： javascript reactjs map-function

【解决方案1】：

你不能在 JSX 中使用嵌套大括号 {}，去掉里面的大括号就可以了：


  return (
    <>
      {options.map(option)}
      <StyledRow>
        {variousOptions.map((opt) => shouldRenderPlanA ? (
          <StyledLabelOptionOne
            variousProps={variousProps}
          />
        ) : (
          <StyledLabelOptionTwo
            variousProps={variousProps}
          />
        ))}
      </StyledRow>
    </>
  );

【讨论】：

【解决方案2】：

这就是问题所在。

          (
            {shouldRenderPlanA ? (

你不能期望返回一个对象，而是

  (shouldRenderPlanA ?

或者尝试在开头写一些简单的东西，例如。 flag?1:0 在插入其他东西之前让它工作:)

【讨论】：

【解决方案3】：

您有一个错误，因为您没有在地图内返回值

也许这对你有帮助

return (
  <>
    {options.map(option)}
    <StyledRow>
      {variousOptions.map((opt) => {
        return shouldRenderPlanA ? (            
          <StyledLabelOptionOne
             variousProps={variousProps}
          />
          ) : (            
          <StyledLabelOptionTwo
             variousProps={variousProps}
          />
        }
      ))}
    </StyledRow>
  </>
);

你必须删除括号，并返回元素

【讨论】：