我想使用 jQuery 和其他一些不是 React 原生的第三方库。我如何在我的 React 项目中使用它们？我读过componentDidMount是调用第三方库的好地方。
不幸的是，我无法使用这些库，因为我不断收到“未定义”错误，即使我已将脚本标签正确链接到我的 index.html 文件中的这些库。
如何在 React 中使用/包含第三方库？
IT技术
reactjs
2021-04-11 18:34:31
2个回答
您有两个选项，都由一个人为的示例演示，我使用 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如果您尝试引用未导入的代码（即，import $ from "jquery"自从我们在 中引用库以来，您永远不会）， 的默认语法 linter (eslint) 将在项目编译期间抛出错误index.html。所以当我们引用 jQuery 的全局$引用时（在浏览器中使用 jQuery 是很正常的），我们违反了在 Node.js 上构建module化 JavaScript 应用程序的基本原则。在 Node 中，module是一种生活方式，在这些module中，我们只能引用我们明确导入的对象。如果没有明确提及，我们在技术上违反了惯例，因此收到了 linter 的投诉。
现在你和我都知道，$一旦应用程序在浏览器中实际运行，引用就会变得可用。当componentDidMount()被调用，查看已经安装到DOM和你的第三方库（在本例中的jQuery）可供参考。不幸的是，linter 会阻止您的 React 应用程序渲染，因为它认为您正在尝试引用未定义的变量。此外，linter 与平台无关，并且不知道您的应用程序正在浏览器中运行（因为 JavaScript 不再是仅浏览器的语言）。这可能很烦人，但 linter 只是在做它的工作，并且在某种程度上，它是绝对正确的。
为避免此错误，有几个选项：
- 让 eslint（提供的 linter）忽略您使用
// eslint-disable-next-line(not preferred)引用第三方库的行，或 - 利用
window（首选），或 - 关闭 linter（不推荐），或
- 不要使用 create-react-app（您的偏好，不建议初学者甚至专家使用）。
如果您对第三方库进行大量调用，第一个选项很容易变得麻烦。如果您继续阅读componentDidMount，您就会知道在这个调用点，您现在可以访问该window变量。window如果库将自身附加到 DOM 的全局window对象，您可以通过它访问您的库。在我们的示例中，jQuery 就是这样做的，我们可以通过以下方式访问 jQuery 的功能window.$
选项 2：安装库 usingnpm install <package-name> -S并将import库安装到相关的项目文件中。
终端
npm i jquery -S
应用程序.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 爆炸。
对于缺点，window如果您使用的是 linter（并且您可能应该），则第一种方法可能需要您添加到第三方库调用中；在后一种情况下，有时第三方库无法通过 npm 安装它们的项目代码，您必须手动下载它们并手动将它们添加到您的项目源文件夹中。在这种情况下，使用第一种方法可能有意义，这样您就不必在库的新版本发布时手动导入它们。
如果在所有这些结束时，您的代码失败：
- 确保您安装了正确的软件包，
- 确保您已将其直接包含在索引文件中或将其导入到您进行库特定调用的项目和文件中。
如果您知道将第三方库集成到 React 中的其他方法或在本文中发现错误，请随时编辑此答案或添加另一个答案。
此答案中的示例假设执行环境是浏览器，因此使用window. 如果你正在构建一个 shell 脚本或使用 react-native，它会是global，等等。
我需要在 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;
其它你可能感兴趣的问题