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

小编典典

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

reactjs

我想使用jQuery和其他不是React本身的第三方库。如何在我的React项目中使用它们？我读到的componentDidMount是调用第三方库的好地方。

不幸的是，即使我已经正确地将脚本标记链接到index.html文件中的那些库，但由于不断收到“未定义”错误，所以我无法使用这些库。

阅读 244

2020-07-22

共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中，模块是生活方式，在这些模块中，我们只能引用我们显式导入的对象。在没有明确提及的情况下，我们在技术上违反了惯例，因此也就少了一些抱怨。

现在，您和我都知道，$一旦应用程序实际在浏览器中运行，该引用将变得可用。当componentDidMount()被调用，查看已经安装到DOM和你的第三方库（在本例中的jQuery）可供参考。不幸的是，lint会阻止您的react应用呈现，因为它认为您正在尝试引用未定义的变量。此外，lint与平台无关，并且不知道您的应用程序正在浏览器中运行（因为JavaScript不再是仅用于浏览器的语言）。这可能很烦人，但短绒棉正在做它的工作，并且在某种程度上，这是绝对正确的。

为避免此错误，有几种选择：

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

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

选项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上托管的库，并可以利用网络效应，而无需将第三方代码导入到您的代码库中。使用后者，您可以使您的代码更具可读性，并避免棉绒爆炸。

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

如果在所有这些操作的最后，您的代码失败：

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

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

此答案中的示例假定执行环境是浏览器，因此使用window。如果您正在构建Shell脚本或使用react-native，则为global，等等。

2020-07-22