选项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"，因为我们在{ {1}}）。因此，当我们引用jQuery的全局index.html引用时（在浏览器中使用jQuery时非常正常），我们违反了在Node.js上构建模块化JavaScript应用程序的基本原则。在Node中，模块是生活方式，在这些模块中，我们只能引用我们明确导入的对象。如果没有明确提及，我们在技术上会破坏惯例，因此来自短信的抱怨。

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

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

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

如果您拨打第三方图书馆的电话，第一个选项很容易变得麻烦。如果您阅读window，您就知道在此调用时，您现在可以访问componentDidMount变量。如果库将自身附加到DOM的全局window对象，则可以通过window访问您的库。在我们的示例中，jQuery就是这样做的，我们可以通过window

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

<强>终端

import

<强> App.jsx

npm i jquery -S

什么是正确的方法？

每种方法都有各自的优点和缺点：首先，您可以使用托管在CDN上的库和网络效果库，而不需要将第三方代码导入代码库。使用后者，您可以使您的代码更具可读性并避免浪费爆炸。

对于缺点，第一种方法可能要求您在第三方库调用中添加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"));，如果您正在使用linter（并且您可能应该这样做）;在后一种情况下，有时第三方图书馆无法通过npm安装他们的项目代码，您必须手动下载它们并手动将它们添加到项目源文件夹中。在这种情况下，使用第一种方法可能是有意义的，这样您就不必在它们被发布时手动导入新版本的库。

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

确保您安装了正确的软件包
确保您已将其直接包含在索引文件中或将其导入到您正在创建库的项目和文件中特定电话。

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

本回答中的示例假设执行环境是浏览器，因此使用window。如果您正在构建shell脚本或使用react-native，那么它将是window等。

Answer 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;

如何使用/包含第三方库作出反应？

2 个答案:

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

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

如何使用/包含第三方库作出反应？

2 个答案:

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

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

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