Ract FontAwesome ES6 用法

Question

美好的一天

我是 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: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of Footer. in Footer (created by App) in div (created by App)

如果有人愿意告诉我我可能要去哪里，我将不胜感激。

Answer 1

他们的 docs page 上有一个简单的例子应该能帮到您：

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)

Ract FontAwesome ES6 用法

Ract FontAwesome ES6 usage

font-awesome

ecmascript-6

reactjs