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

Question

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

“意外令牌 ?，需要令牌 :”

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

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

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

Answer 1

您不能在 JSX 中使用嵌套大括号 {}，删除内部大括号即可：


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

Answer 2

问题来了。

          (
            {shouldRenderPlanA ? (

你不能期望 return 对象，而是

  (shouldRenderPlanA ?

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

Answer 3

您有一个错误，因为您没有return地图中的值

也许这可以帮到你

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

您必须删除括号，return 元素

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

Ternary statement not accepted in JSX (Unexpected token "?")

javascript

reactjs

map-function