Question

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

Answer 1

尝试调用脚本并将其附加到Root组件的componentDidMount上。这是一个片段：

//#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.map(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>

在以下代码中使用此功能并且效果很好

＆＃13;

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;

＆＃13;

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

如何在reactjs中使用外部js文件

2 个答案: