reactjs中如何使用外部js文件

Question

我正在尝试将 bootstrap 4 模板转换为 reactjs bootstrap 工作正常，但还有其他 javascript 插件，我不知道如何使用。 任何建议，将不胜感激。

Answer 1

更新：请不要混用 jQuery 和 React。 处理 DOM 和 VirtualDOM 可能很困难。 如果您确实需要，请尝试一下：

尝试调用脚本并在 componentDidMount 位于 Root 组件时附加它。 这是一个片段：

//#Write some like this in the App.js for example, since it's the main component:
componentDidMount(){
    //An array of assets
    let scripts = [
        { src: "assets/vendor/jquery/jquery.js" },
        { src: "assets/vendor/bootstrap/js/bootstrap.js" },
        { src: "assets/vendor/jquery-placeholder/jquery.placeholder.js" },
        { src: "assets/javascripts/theme.js" },
        { src: "assets/javascripts/theme.custom.js" },
        { src: "assets/javascripts/theme.init.js" }
    ]
    //Append the script element on each iteration
    scripts.forEach(item => { 
        const script = document.createElement("script")
        script.src = item.src
        script.async = true
        document.body.appendChild(script)
    })    
 }

Answer 2

在 index.html 中包含脚本标签

假设你想在你的 ReactJs 应用程序中包含 JQuery

在index.html中包含以下内容

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

在下面的代码中使用它并且效果很好

 import React, { Component } from 'react'; class App extends Component { constructor(){ super() this.callJquery = this.callJquery.bind(this); } callJquery(){ window.$("#sample").click(function(){ alert("Text: Button Clicked"); }); } render() { return ( <div className="App"> <div id="sample" onClick={this.callJquery}> Hellow </div> </div> ); } } export default App;

同样，您可以通过包含在 index.html 中然后使用它来使用任何库。