三元内部的 JSX 未返回所需的结果

Question

问题：

如果三元为真，我尝试返回图标和文本，如果三元为假，则仅返回文本。这是我的代码：

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

当我这样做时，这就是我得到的，有人能指出我为什么会发生这种情况吗？

Answer 1

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

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

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

或者使用简写符号：

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