我一直在阅读各种文章，包括这篇在 spfx webpart 中使用 jquery 函数的文章，但我似乎无法让 jQuery 与我的 SPFx webpart 一起使用。
我的第一次尝试是将加载放在全局范围内：
public constructor() {
super();
SPComponentLoader.loadCss('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
SPComponentLoader.loadCss('https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css');
SPComponentLoader.loadScript('https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js', { globalExportsName: 'jQuery' }).then((jQuery: any): void => {
SPComponentLoader.loadScript('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/js/bootstrap.min.js', { globalExportsName: 'jQuery' }).then((): void => {
});
});
}
尽管在构造函数中，上面的代码在我的渲染函数中导致错误（jQuery 未定义）：
public render(): void {
this.domElement.innerHTML = /* etc...*/
const webpart: ContactFormSimpleWebPartWebPart = this;
// assign handlers
jQuery('#btn-submit-contact-form-simple').on('click', function() {
webpart.SubmitContactFormSimple();
});
// assign vars
this.Category = jQuery('#sel-category');
this.Message = jQuery('#txt-message');
this.ErrorContainer = jQuery('#div-contact-form-simple-errors');
}
接下来，我尝试添加版本 2 的类型（据我所知，这是 SPFx 支持的最高版本）：
npm install @types/jquery@2.0.48 --save-dev
"externals": {
"jquery": {
"path": "https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js",
"globalName": "jQuery"
}
},
上述结果导致许多类似于以下的编译错误：
ReferenceError：未定义 jQuery
我什至尝试将它直接添加到渲染中，这不会导致任何错误，只是什么也没发生！不显示生成的 HTML。"):
public render(): void {
SPComponentLoader.loadScript('https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js', { globalExportsName: 'jQuery' }).then((jQuery: any): void => {
SPComponentLoader.loadScript('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/js/bootstrap.min.js', { globalExportsName: 'jQuery' }).then((): void => {
this.domElement.innerHTML = /* etc...*/
const webpart: ContactFormSimpleWebPartWebPart = this;
// assign handlers
jQuery('#btn-submit-contact-form-simple').on('click', function() {
webpart.SubmitContactFormSimple();
});
// assign vars
this.Category = jQuery('#sel-category');
this.Message = jQuery('#txt-message');
this.ErrorContainer = jQuery('#div-contact-form-simple-errors');
});
});
}
我什至尝试在初始化中添加它：
protected onInit(): Promise<void> {
SPComponentLoader.loadCss('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
SPComponentLoader.loadCss('https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css');
SPComponentLoader.loadScript('https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js', { globalExportsName: 'jQuery' }).then((jQuery: any): void => {
SPComponentLoader.loadScript('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/js/bootstrap.min.js', { globalExportsName: 'jQuery' }).then((): void => {
});
});
return Promise.resolve(undefined);
}
我还能尝试什么才能在我的 SPFx webpart 中使用 jQuery？
编辑：当我尝试import * as jQuery from 'jQuery'我得到这个错误：
