Question

我正在使用create-react-app创建一个React应用。我在主index.html

中有一些用于模板设计的外部javascript库

 <script src="%PUBLIC_URL%/js/jquery-2.2.4.min.js"></script>
 <script src="%PUBLIC_URL%/js/common_scripts.js"></script>
 <script src="%PUBLIC_URL%/js/main.js"></script>
 <script src="%PUBLIC_URL%/js/owl.carousel.js"></script>

启动应用程序后，这些JS文件将在首页上运行。但是当从首页重定向到其他页面时，这些库不起作用。据我了解，这些文件正在渲染，但是更改路线时无法访问它们的functions, variables, and methods。我正在使用react-router-dom v4进行路由。

我用Google搜索了，找到了解决方案- 通过ComponentDidMount()方法呈现JS库

ComponentDidMount(){
    loadjs('./js/main.js', function(){
    loadjs('./js/common_scripts.js)
    });
  }

但是，即使此解决方案也不起作用。请帮助解决此问题。

谢谢

Answer 1

您使用的是componentWillMount()而不是componentDidMount()。

我认为这是问题所在。

Answer 2

您可以在窗口对象上设置该js文件，然后可以通过window.your_name来访问它。

您必须在索引文件中设置

Answer 3

尝试在import()内使用componentDidMount()

import（）是自解释的，它只是导入JavaScript文件。

import('your_URL')

Answer 4

尝试使用窗口对象调用事件。参考<a href="https://github.com/facebook/create-react-app/issues/3007#issuecomment-357863643">Link</a>

Answer 5

这是我将Jquery导入到我的create react应用程序中的方法

jQuery：

首次运行npm install jquery
index.js

import * as $ from 'jquery'

window.jQuery = window.$ = $

请参阅：http://blog.oddicles.org/create-react-app-importing-bootstrap-jquery-cleanly-node-js/

或者，您可以将脚本附加到窗口对象，然后根据需要调用它们：

尝试以下步骤：

在/public/index.html中包括外部js文件链接使用带前缀窗口的外部库。例如JQuery。

在您的/public/index.html

中放入以下行

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

在您的项目中使用它：

window.$("#btn1").click(function(){
    alert("Text: " + $("#test").text());
});

`

有关更多详细信息，请参见：

https://github.com/facebook/create-react-app/issues/3007

Answer 6

const loadScript = (src) => {
  return new Promise(function (resolve, reject) {
    var script = document.createElement('script')
    script.src = src
    script.addEventListener('load', function () {
      resolve()
    })
    script.addEventListener('error', function (e) {
      reject(e)
    })
    document.body.appendChild(script)
    document.body.removeChild(script)
  })
}

 useEffect(() => {
    loadScript(`${process.env.PUBLIC_URL}/js/plugin.min.js`)
    setTimeout(() => {
      setTimeout(() => {
        setLoading(false)
      }, 500)
      loadScript(`${process.env.PUBLIC_URL}/js/main.js`)
    }, 200)
  }, [])

外部Javascript在react.js中不起作用

6 个答案: