即使正确加载 jQuery 也没有定义
Posted
技术标签:
【中文标题】即使正确加载 jQuery 也没有定义【英文标题】：jQuery is not defined even though it loads correctly 【发布时间】：2019-12-13 08:27:38 【问题描述】：我在代码中使用 jQuery 时遇到问题。查看 Chromes 开发人员工具，我看到 jQuery 库旁边的状态为 200，因此它似乎可以正确加载。我还确保在我的 App.js 主 javascript 之前加载它。有谁知道我为什么会收到这个错误？
这是我的 index.html ：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
//<![CDATA[
src="../components/App.js"
//]]>
</script>
这是我在App.js中使用jQuery的地方：
class App extends React.Component
constructor(props)
super(props)
this.state= fileChanged:false, fileChosenForComment:null, currentAuthor: null, files:null, fileChangeCounter:-1
componentDidUpdate =()=>
jQuery(document).ready(function () console.log('inside DidUpdate method');
jQuery('#file-list').on('click', this.updateClickCounter);
);
updateClickCounter = () =>
this.setState(fileChangeCounter:this.state.fileChangeCounter + 1, console.log(this.state.fileChangeCounter))
这是 App 类中的渲染方法
render()
return (
<div className = "ui container" >
<div className = " ui relaxed grid">
<div className = "two column row">
<div className = " column uploader float right upload-button" >
<h2>File Uploader</h2>
<input
type="file"
id = "my-file"
multiple
onChange = ()=>this.sendFiles() // this doesnt immediately call it cos ()=> is same as doing //function(). i.e same as defining it so not calling it here. and because function isnt called here (i.e havent done function()()) the inside (callChild()) wont be called
/>
</div>
<div className = 'column login'>
<h4> <LoginSection getCurrentUser = (author)=>this.getCurrentUser(author)/> </h4>
</div>
</div>
<div className = "two column row">
<div className = "column float left file-list ">
<h2> File List </h2> /* if no files selected display message, else send files to fileList child*/
!this.state.fileChanged &&
<h4>
No files currently selected
</h4>
<FileList fileList= this.state.files onCommentButtonClick=this.onCommentButtonClick/> /* pass onCommentButtonClick as callback func to child*/
</div>
<div className="column">
<h2> Comment Section </h2>
<CommentSection
selectedFile = this.state.fileChosenForComment
currentAuthor= this.state.currentAuthor
fileChangeCounter = this.state.fileChangeCounter
/>
</div>
</div>
</div>
</div>
)
【问题讨论】：
<script src="../components/App.js"></script> 不是你所拥有的
你为什么要尝试使用 jQuery 来制作点击事件处理程序，而不是使用正确的反应操作符？ reactjs.org/docs/handling-events.html
你在使用 webpack 吗？
我看不到您的其余代码，但我会猜测并说您需要在某处添加 jQuery.noConflict(true)。默认情况下，jQuery 使用 $.如果你没有声明 jQuery 替换 $ 它将不起作用。
@Billy 肯定使用 jQuery 而不是 $ 就像我正在做的那样意味着这无关紧要吗？
【参考方案1】：
如果你使用 webpack，你应该做的一件事是添加这个配置：
plugins: [
new webpack.ProvidePlugin(
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
),
],
您可以尝试的另一件事是使用 window.jQuery 访问 jQuery 全局变量。
最后你可以使用 refs 代替选择器，我认为这更具可读性：
<div ref=(el) => this.clickable = el; >click Me</div>
window.jQuery(this.clickable).on('click', this.updateClickCounter);
【讨论】：
以上是关于即使正确加载 jQuery 也没有定义的主要内容，如果未能解决你的问题，请参考以下文章
Jquery onLoad() - 加载页面中的输入字段显示不正确
即使在页面加载后，Salesforce 闪电自定义标签也不会更新