ReactJS错误编译失败'define'未定义

我尝试编译的应用程序未使用外部 jquery 及其关联的 JS 文件进行编译。当我尝试将这些文件链接到 ReactJS 应用程序中的 HTML 页面时，它会抛出以下错误。

错误是：

'define' 未定义 no-undef。

此错误来自 jquery.js 文件，该文件本质上是外部文件，显示此错误的行是：

if (typeof define === 'function' && define.amd) {
    // AMD. Register as an anonymous module.
    define(['jquery'], factory);
}

有一个 jquery.sticky.js 文件，添加后我收到这些错误。

'jQuery' 未定义 no-undef

'padding' 未定义 no-undef

这个错误来自下面几行

 padding =  s.stickyElement.innerWidth() - s.stickyElement.width();

基本上，重点是我正在尝试将 HTML 模板转换为 ReactJS 模板，但我在添加外部 JS 文件时遇到了困难，默认情况下 ReactJS 会编译这些文件以查看是否符合标准。除了 JS 文件设置之外，我能够将整个主题转换为 React。我需要这方面的帮助。

欢迎任何建议:-)

您所看到的只是违反了 ESlint 规则，即在未先定义变量的情况下不允许使用该变量。例如，以下内容将导致错误：

a = 5

虽然这可行：

var a = 5;

问题是您无法定义正在使用的变量，例如jQuery因为它们已经被全局定义了。但 ESLint 并不知道这一点，只是认为jQuery就像您忘记定义的任何其他变量一样。

您有多种选择，其中一种是完全禁用此 ESLint 规则。为此，您只需在文件顶部添加以下内容即可：

/* eslint no-undef: "off"*/

注意规则的名称no-undef已包含在错误消息中。

更好的选择是保持规则启用，但让 ESLint 知道变量如jQuery and padding是外部包提供的全局变量。为此，您只需将以下内容添加到文件顶部：

/* global jQuery, padding */

请记住，es-lint“编译”错误本身并不是真正的编译错误，您发布的代码是有效的代码，否则可以在浏览器中按原样工作。有时，ESLint 规则可能比普通开发人员希望的更严格。在这种情况下，您可以使用这些相同的方法来禁用某些规则。但始终尝试理解规则的含义，并考虑如何在不完全禁用规则的情况下修复代码。