如何在反应中使用/包含第三方库？答案

【问题标题】：How do I use/include third party libraries in react?如何在反应中使用/包含第三方库？
【发布时间】：2018-01-21 07:53:48
【问题描述】：

我想使用 jQuery 和其他一些非 React 原生的第三方库。我如何在我的 React 项目中使用它们？我读到componentDidMount 是调用第三方库的好地方。

不幸的是，我无法使用这些库，因为我不断收到“未定义”错误，即使我已将脚本标签正确链接到我的 index.html 文件中的这些库。

【问题讨论】：

标签： reactjs

【解决方案1】：

您有两个选项，都通过一个人为的示例演示，我使用 jQuery 淡出无序列表。两种方法各有利弊，我强调两者，然后提供我的选择。

选项 1：在 index.html 文件中包含第三方库

index.html

<head>
    ...
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    ...
</head>

App.jsx

import React, { Component } from "react";

class App extends Component {
  componentDidMount() {
    // ** following two lines of code do the same thing
    // using the first version, however, could potentially cause errors
    // see "Referencing unimported libraries when using create-react-app"
    $(this.refs.list).fadeOut(); // version 1
    window.$(this.refs.list).fadeOut(); // version 2
  }

  render() {
    return (
      <ul ref="list">
        <li>Item 1</li>
        <li>Item 2</li>
      </ul>
    );
  }
}

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

使用create-react-app时引用未导入的库

** 如果你使用create-react-app 搭建你的项目，使用第一个版本的代码会抛出错误。这是因为 create-react-app 的默认语法 linter (eslint) 将在项目编译期间抛出错误，如果您尝试引用非导入代码（即您永远不会 import $ from "jquery"，因为我们在 index.html 中引用了库）。所以当我们引用 jQuery 的全局 $ 引用（在浏览器中使用 jQuery 时这是很正常的），我们违反了在 Node.js 上构建模块化 JavaScript 应用程序的基本原则。在 Node 中，模块是生活方式，在这些模块中，我们只能引用我们显式导入的对象。如果没有明确提及，我们在技术上打破了惯例，因此来自 linter 的抱怨。

现在您和我都知道，一旦应用程序在浏览器中实际运行，$ 引用就会变得可用。当componentDidMount() 被调用时，视图已经挂载到DOM 并且您的第三方库（在我们的示例中为jQuery）可供参考。不幸的是，linter 会阻止你的 react 应用程序渲染，因为它认为你正在尝试引用未定义的变量。此外，linter 与平台无关，并且不知道您的应用程序正在浏览器中运行（因为 JavaScript 不再是仅浏览器的语言）。这可能很烦人，但 linter 只是在做它的工作，而且，在某种程度上，它是绝对正确的。

为避免此错误，有几个选项：

让 eslint（提供的 linter）忽略您创建的行使用// eslint-disable-next-line 引用第三方库（非首选） , 或
使用window（首选），或
关闭 linter（不是首选），或
不要使用 create-react-app（您的偏好，不建议初学者甚至专家使用）。

如果您对第三方库进行大量调用，第一个选项很容易成为麻烦。如果您阅读了componentDidMount，就会知道在调用的这一点上，您现在可以访问window 变量。如果库附加到 DOM 的全局 window 对象，您可以通过 window 访问您的库。在我们的示例中，jQuery 就是这样做的，我们可以通过 window.$ 访问 jQuery 的功能

选项 2：使用 `npm install <package-name> -S` 和 `import` 将库安装到相关项目文件中。

终端

npm i jquery -S

App.jsx

import React, { Component } from "react";
import $ from "jquery";


class App extends Component {
  componentDidMount() {
    $(this.refs.list).fadeOut();
  }

  render() {
    return (
      <ul ref="list">
        <li>Item 1</li>
        <li>Item 2</li>
      </ul>
    );
  }
}

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

什么是正确的方法？

每种方法各有利弊：使用第一种方法，您可以使用托管在 CDN 上的库并利用网络效应，无需将第三方代码导入您的代码库。使用后者，您可以使您的代码更具可读性并避免 linter 爆炸。

对于缺点，如果您正在使用 linter（您可能应该这样做），第一种方法可能需要您将 window 添加到您的第三方库调用中；在后者的情况下，有时第三方库没有可通过 npm 安装的项目代码，您必须手动下载它们并手动将它们添加到项目源文件夹中。在这种情况下，使用第一种方法可能有意义，这样您就不必在新版本的库发布时手动导入它们。

如果在所有这些结束时，您的代码失败：

确保您安装了正确的软件包，
确保已将其直接包含在索引文件中或将其导入到您正在制作库的项目和文件中特定的调用。

如果您知道将第三方库集成到 react 的其他方法或在本文中发现错误，请随时编辑此答案或添加其他答案。

此答案中的示例假定执行环境是浏览器，因此使用 window。如果你正在构建一个 shell 脚本或使用 react-native，它会是 global 等。

【讨论】：

只需使用 npm 安装依赖项并导入即可正常工作
1) 如果库不在npm 上？ 2）如果通过<script>标签包含一个库不是一个选项？
@Green 绝对是一个选项，有时也是唯一的选项。如果有一个通过 npm 包含库的选项，那么在引用库和需要在整个代码中使用 window.libraryname.librarymethod 方面会更轻松。另外，它使与 webpack 捆绑起来小菜一碟，它会自动拾取它（你仍然可以这样做，但你必须通过手动配置，这不是首选）。
您可能需要重新考虑使用最初不在 npm 上的第三方库，因为这是该库不再维护良好或根本无法维护的潜在迹象。但就像我说的，有时不是一个选项。
我有同样的问题，我正在尝试为 react-native 执行此操作，但无法找到包含某些第三方网站上的 js 的方法。

【解决方案2】：

我需要在 React 组件中使用第三方库以及自定义编写的 javascript 文件，而不需要通过其他路由加载它们。

请注意，我使用了 React Hook，即useEffect()，因此您需要一个支持它们的 react 版本。

以下是对我有用的方法。

import React, { useEffect } from "react";

const Airstrip = props => {
  useEffect(() => {
    // Now Attach All Third Party Scripts.
    let threeJsScript = document.createElement("script");
    let orbitJsScript = document.createElement("script");
    let guiJsScript = document.createElement("script");
    let mainJsScript = document.createElement("script");

    // Hook Sources.
    threeJsScript.src = `${process.env.PUBLIC_URL}/js/three.js`;
    orbitJsScript.src = `${process.env.PUBLIC_URL}/js/orbit.js`;
    guiJsScript.src = `${process.env.PUBLIC_URL}/js/gui.js`;
    mainJsScript.src = `${process.env.PUBLIC_URL}/js/main.js`;

    // Persist order of Loading.
    threeJsScript.async = false;
    orbitJsScript.async = false;
    guiJsScript.async = false;
    mainJsScript.async = false;

    // Append to index.html
    document.body.appendChild(threeJsScript);
    document.body.appendChild(orbitJsScript);
    document.body.appendChild(guiJsScript);
    document.body.appendChild(mainJsScript);

    // Do Clean ups
    return () => {
      document.body.removeChild(threeJsScript);
      document.body.removeChild(orbitJsScript);
      document.body.removeChild(guiJsScript);
      document.body.removeChild(mainJsScript);
    };
  }, []);

  return (
    <div id="airstrip">
      <canvas
        id="canvas"
        onClick={() => {
          alert("Yeah");
        }}
      ></canvas>
    </div>
  );
};

export default Airstrip;

【讨论】：

选项 1：在 index.html 文件中包含第三方库

选项 2：使用 npm install &lt;package-name&gt; -S 和 import 将库安装到相关项目文件中。

选项 2：使用 `npm install <package-name> -S` 和 `import` 将库安装到相关项目文件中。