Question

我创建了一个React项目，并试图将FontAwesome图标放入react项目中，但是它显示了一些语法错误，因此可以帮助我解决此问题。

这是package.json文件

{
  "name": "icons",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.25",
    "@fortawesome/free-brands-svg-icons": "^5.11.2",
    "@fortawesome/free-regular-svg-icons": "^5.11.2",
    "@fortawesome/free-solid-svg-icons": "^5.11.2",
    "@fortawesome/react-fontawesome": "^0.1.7",
    "react": "^16.11.0",
    "react-dom": "^16.11.0",
    "react-scripts": "3.2.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

这是index.js文件

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

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

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

ReactDOM.render(<App />, element, document.getElementById('root'));


serviceWorker.unregister();

我遇到这样的错误错误：目标容器不是DOM元素。

Answer 1

您对将React代码呈现到DOM中感到有些困惑。

React.render()有2个参数，第一个是您的React元素，第二个是index.html文件中的目标，而您添加了3个参数，因此会出现错误。

在这种情况下，您需要创建一个React无状态功能组件，称为App：

function App() {
  return (
    <div>
      <FontAwesomeIcon icon={faCoffee} />
    </div>
  )
}

现在，根据您现有的代码，现在可以使用jsx组件，因此您可以使用：

ReactDOM.render(<App />, document.getElementById('root'));

来源：https://reactjs.org/docs/components-and-props.html

Answer 2

如果未在App中渲染图标，则可以直接直接渲染它：

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

ReactDOM.render(<div>{element}</div>, document.getElementById('root'));

但是正如Kraylog指出的那样，您没有正确使用ReactDOM.render方法。您可以here来了解它。

Answer 3

关于“我收到类似此错误的错误：目标容器不是DOM元素”。错误，您需要确保您的 index.html 文件中有一个ID为root的div，例如<div id="root"></div>。 ReactDOM（从import ReactDOM from "react-dom";导入）上具有 render 方法，该方法可将您的React代码转换为纯JavaScript，然后将其插入 real DOM中。渲染方法仅需要两个参数即可工作，但是可以将第三个参数用作像ReactDOM.render(element, container, () => console.log("Application Mounted in DOM"))这样的回调函数，但是我从未见过有人使用该回调函数。您可以在官方文档网站ReactDOM.render上阅读有关此内容的更多信息，也可以在YouTube here

上观看它的漂亮视频

有关以可重复使用的方式使用图标的其他提示。

按照@fortawsome npmjs注册表中的步骤进行操作

为原因安装必要的软件包

$ npm i --save @fortawesome/fontawesome-svg-core
$ npm i --save @fortawesome/free-solid-svg-icons
$ npm i --save @fortawesome/react-fontawesome

$ yarn add @fortawesome/fontawesome-svg-core
$ yarn add @fortawesome/free-solid-svg-icons
$ yarn add @fortawesome/react-fontawesome

安装更多的免费软件，因为它们足以提供：）

$ npm i --save @fortawesome/pro-solid-svg-icons
$ npm i --save @fortawesome/pro-regular-svg-icons
$ npm i --save @fortawesome/pro-light-svg-icons
$ npm i --save @fortawesome/pro-duotone-svg-icons

如果您是付费专业会员，则安装更多

$ npm i --save @fortawesome/pro-solid-svg-icons
$ npm i --save @fortawesome/pro-regular-svg-icons
$ npm i --save @fortawesome/pro-light-svg-icons
$ npm i --save @fortawesome/pro-duotone-svg-icons

用法

现在，终于可以在应用程序中实际使用它了。我将围绕它创建一个包装器组件，以便以后可以轻松地重复使用图标/组件，并为此创建一个名为 CoffeeIcon.js 的文件，然后在该文件按照以下内容放入内容：

import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCoffee } from "@fortawesome/free-solid-svg-icons";
import PropTypes from "prop-types";

const CoffeeIcon = props => {
  return (
    <React.Fragment>
      {props.labelText ? <label>{props.labelText}</label> : null}
      <FontAwesomeIcon
        icon={faCoffee}
        style={props.styles}
        id={props.id}
        className={props.className}
      />
    </React.Fragment>
  );
};

CoffeeIcon.propTypes = {
  labelText: PropTypes.string,
  id: PropTypes.string,
  className: PropTypes.string,
  styles: PropTypes.object
};

export default CoffeeIcon;

如果您打算使用PropTypes进行类型检查和验证，则将其添加到您的应用程序中，如下所示：

yarn add prop-types或npm i prop-types

最后，回到您想要使用它的组件中，只需执行以下操作：

导入它并将其放置在其他导入语句的正下方：
```
 import CoffeeIcon from "../Components/CoffeeIcon";
```

将组件拖放到所需的位置：

<CoffeeIcon
  styles={{ color: "maroon" }} // optional
  id={"coffee-wrapper-id" || null} // optional
  className={"coffee-wrapper-class" || null} // optional
  labelText={"Coffee Icon"} // optional
/>

您已经完成，现在可以轻松重用它！

如何使FontAwesome图标反应？

3 个答案: