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 ? (  

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

(shouldRenderPlanA ?

或者尝试在开始时写一些简单的东西，例如flag?1:0，以便在插入其他东西之前使其工作:)

Answer 3

你有一个错误，因为你没有返回映射内的值

也许这对你有帮助

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

必须去掉括号，并返回元素