如何修复我的反应应用程序中的“未定义库”错误

Question

在我的反应应用程序中，我收到“库”未定义 no-undef 错误。我正在尝试在我的应用程序中添加很棒的字体。我为此写了一些代码：

错误：

编译失败

./src/sections/header/header.js

第 11 行：“库”未定义 no-undef

搜索关键字以了解有关每个错误的更多信息。

header.js 代码

 import React, { Component } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

 import {
   faGoogle,
   faFacebook,
   faTwitter,
   fainstagram
 } from '@fortawesome/free-brands-svg-icons';

 library.add(
   faGoogle,
   faFacebook,
   faTwitter,
   fainstagram
 );
 class Header extends Component {
   render() {
    return (

   <div className="social-icons">
     <ul>
        <li><a href="javascript:void(0)" className="facebook"><FontAwesomeIcon icon="fafacebook" /></a></li>
        <li><a href="javascript:void(0)" className="twitter"><FontAwesomeIcon icon="fatwitter" /></a></li>
       <li><a href="javascript:void(0)" className="instagram"><FontAwesomeIcon icon="fainstagram" /></a></li>
      </ul>
    </div>
   )
  }
 }

App.js 代码

 import React from 'react';
 import logo from './logo.svg';
 import './App.css';
 import bootstrap from 'reactstrap';

 import { library } from '@fortawesome/fontawesome-svg-core'
 import { fab } from '@fortawesome/free-brands-svg-icons' 
 library.add(fab);

Answer 1

您可以添加库导入，因为其他组件无法全局访问导入

import React, { Component } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faGoogle,
   faFacebook,
   faTwitter,
   fainstagram
 } from '@fortawesome/free-brands-svg-icons';

 library.add(
   faGoogle,
   faFacebook,
   faTwitter,
   fainstagram
 );
 class Header extends Component {
   render() {
    return (

   <div className="social-icons">
     <ul>
        <li><a href="javascript:void(0)" className="facebook"><FontAwesomeIcon icon="fafacebook" /></a></li>
        <li><a href="javascript:void(0)" className="twitter"><FontAwesomeIcon icon="fatwitter" /></a></li>
       <li><a href="javascript:void(0)" className="instagram"><FontAwesomeIcon icon="fainstagram" /></a></li>
      </ul>
    </div>
   )
  }
 }