代码之家 › 专栏 › 技术社区 › fermoga

字体Awesome正在呈现“[对象对象]”(如果放置在连接文本旁边)

font-awesome reactjs

fermoga · 技术社区 · 7 年前

我有一个 Button 组件用于整个平台,它有一个道具 textIcon 如果填充,则应该显示 react-fontawesome 旁边的图标 text 支柱。

class Button extends Component {
  render() {
    const { text, textIcon, loadingText, className, onClick, disabled, isFormGroup } = this.props;

    return (
      <div className={cx(isFormGroup && "form-group")}>
        <button className={className} onClick={onClick} disabled={disabled}>
          {
            disabled
              ? loadingText
              : textIcon ? `${<FontAwesomeIcon icon={textIcon}/>} ${text}` : text
          }
        </button>
      </div>
    )
  }
}

问题是 FontAwesome 组件在文本旁边显示为`[对象对象],但仅在文本旁边显示图标。我尝试过以下方法,但没有成功:

`${<FontAwesomeIcon icon={textIcon}/>} ${text}`

<FontAwesomeIcon icon={textIcon}/> + ` ${text}`

我怎么解决?

2 回复 | 直到 7 年前

Laurenz Glück 7 年前

尝试不要用另一个元素包装文本和图标。如果你不想 <span> 或者按钮里的东西,你可以用 React.Fragment :

import { Fragment } from 'react'; // import Fragment from React


<button className={className} onClick={onClick} disabled={disabled}>
        {
          disabled
            ? loadingText
            : textIcon ? 
                <Fragment>
                    <FontAwesomeIcon icon={textIcon}/> 
                    {text}
                </Fragment> 
                : text
        }
</button>

信息: 片段可以让您分组子列表,而无需向DOM添加额外的节点。更多: https://reactjs.org/docs/fragments.html

Yogesh Gupta 7 年前

在第一个解决方案中,您在这里呈现一个字符串。 react组件/元素是普通的JS对象。如果对象不可序列化,它们将呈现为 [object object] .

你需要把它包起来

<React.Fragment>
 <FontAwesomeIcon icon={textIcon}/> 
  {text}
</React.Fragment>

第二个解决方案不起作用,因为三元对象应该只返回一个对象。通过做 <FontAwesomeIcon icon={textIcon}/> + ${text} 您实际上返回了两个对象。

React.createElement(FontAwesomeIcon)
第二个是字符串对象 {text} .

推荐文章

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

7 月前

Facundo Cabrera · 意外的应用程序错误!useNavigate()只能在<Router>组件的上下文中使用

7 月前

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

7 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

8 月前

Luckkks · 过渡色工作不正常

8 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

8 月前

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

8 月前

hasratyan · Next.js 15 API路由-动态路由中的无效GET导出错误[id]

8 月前

noblerare · Vite错误-未定义导出(SSR)

8 月前

ProfessorFinesse · 在默认表单中完成帖子请求时,“res.send”会去哪里?

8 月前