三元中的 JSX 未返回所需的结果

Question

问题：

我正在尝试 return 如果三元为真，则图标连同文本，如果三元为假，则仅显示文本。这是我的代码：

{quote.is_archived ? <PencilFill className="mr-10" size={ 10 }/>  + 'View' : 'Edit'}

当我这样做时，这就是我得到的结果，谁能告诉我为什么会这样。

Answer 1

<PencilFill className="mr-10" size={ 10 }/> + 'View'

this 的第一部分是一个对象，第二部分是一个字符串，所以当你将它们连接在一起时，你会得到 [object Object]View。你可能想做的是一个片段，如：

<React.Fragment>
  <PencilFill className="mr-10" size={ 10 }/>
  View
</React.Fragment>

或使用 shorthand 表示法：

<>
  <PencilFill className="mr-10" size={ 10 }/>
  View
</>

Answer 2

不要使用 + 运算符，因为它会将 JSX 与字符串连接起来。
只在你想改变的地方尝试三元。

<PencilFill className="mr-10" size={ 10 }/> 
{quote.is_archived ? 'View' : 'Edit'}

JSX inside ternary not returning desired result