如何从 React 中的函数返回文本+图标

Question

我在 Reactjs 中编写了一个函数，如果满足特定条件，我想返回带有图标的文本。这是我的写法

if (actionNeeded) {
  return abbreviation + <i className={'fa fa-exclamation-circle fa-fw'} />;
 }

这将返回text [object Object]而不是text (icon). 我怎样才能让它发挥作用？

Answer 1

您需要返回一个 JSX 元素才能进行<i>渲染。

在您当前的情况下，它会看到这abbreviation是一个字符串，并将其连接起来<i>，为您提供Object.toString().

您可以使用 React.Fragment 来执行此操作：

return (
    <React.Fragment>
        {abbreviation} <i className="fa fa-exclamation-circle fa-fw" />
    </React.Fragment>
);