时间戳

首页 > 解决方案 > Ract FontAwesome ES6 使用

reactjs - Ract FontAwesome ES6 使用

问题描述

再会

我是一名新手 React 开发人员，使用 ES6 标准为客户构建网站。我发现了一个组件，它的用法作为描述使用了较旧的语法，并且在实现我的代码时遇到了一些麻烦。我收到一条错误消息，我不起诉如何解决。

有问题的组件可以在这里看到： https ://www.npmjs.com/package/react-fontawesome

它指示您按如下方式使用该组件：

var React = require('react');
var FontAwesome = require('react-fontawesome');

React.render(<FontAwesome name='rocket' />, document.body);

据我了解，这是编写 React 代码的一种较旧的方式。因此，我已将我的代码更新为 ES6 标准。我在 package.json 文件中查找了从哪里导入组件，所以我不确定这是否是我出错的地方。

下面是我的代码副本，使用了我认为正确的实现：

import React, { Component } from "react";
import FontAwesome from '@fortawesome/fontawesome-svg-core';

export class Footer extends Component {
  constructor(props) {
    super(props);
  }

  render = _ => {
    return (
      <div>
       <FontAwesome name='rocket' />
      </div>
    );
  }
}

当我导入组件并运行代码时，出现以下错误：

React.createElement：类型无效 - 需要一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

检查Footer. in Footer（由 App 创建） in div（由 App 创建）

如果有人愿意让我知道我可能会在哪里绞尽脑汁，我将非常感激。

标签： reactjsecmascript-6font-awesome

解决方案

他们的文档页面上有一个简单的示例，应该会有所帮助：

import ReactDOM from 'react-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'

const element = <FontAwesomeIcon icon={faCoffee} />

ReactDOM.render(element, document.body)

推荐阅读