即使正确加载 jQuery 也没有定义答案

【问题标题】：jQuery is not defined even though it loads correctly即使正确加载 jQuery 也没有定义
【发布时间】：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 而不是 $ 就像我正在做的那样意味着这无关紧要吗？

标签： javascript jquery reactjs class

【解决方案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);

【讨论】：