我想使用jQuery和其他一些非React原生的第三方库.如何在我的React项目中使用它们？我读的componentDidMount是调用第三方库的好地方.
不幸的是,我无法使用这些库,因为我一直在"未定义"错误,即使我已经将我的index.html文件中的脚本标记正确链接到这些库.
Gov*_*Rai 14
你有两个选择,都是通过一个人为的例子展示的,我用jQuery淡出了一个无序列表.两种方法都有利弊,我突出两者,然后提供我的选择.
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)可供参考.不幸的是,linter会阻止你的反应应用程序渲染,因为它认为你试图引用未定义的变量.此外,linter是平台无关的,并且不知道您的应用程序是否在浏览器中运行(因为JavaScript不再是仅限浏览器的语言).这可能很烦人,但是短信只是在做它的工作,而且在某种程度上,这是绝对正确的.
为避免此错误,有几个选项:
// eslint-disable-next-line(不是首选)引用第三方库的行,或 window(首选),或如果您对第三方库进行大量调用,第一个选项很容易变得麻烦.如果您继续阅读componentDidMount,您知道在此调用时,您现在可以访问该window变量.window如果库将自身附加到DOM的全局window对象,则可以访问库.在我们的示例中,jQuery就是这样做的,我们可以通过访问jQuery的功能window.$
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到第三方库调用,如果您正在使用linter(并且您可能应该); 在后者的情况下,有时第三方库没有可通过npm安装的项目代码,您必须手动下载它们并手动将它们添加到项目源文件夹中.在这种情况下,使用第一种方法可能有意义,因此您不必在发布时手动导入库的新版本.
如果在所有这些结束时,您有失败的代码:
如果您知道完成第三方库集成的其他方法或在此帖中发现错误,请随时编辑此答案或添加其他答案.
本回答中的示例假设执行环境是浏览器,因此使用window.如果你正在构建一个shell脚本,那么global,如果使用react-native进行构建,那将是index.html,等等.
| 归档时间： |
|
| 查看次数： |
13372 次 |
| 最近记录： |