Внешний Javascript не работает в Reaction.js

Question

Я создаю приложение реакции, используя create-react-app.У меня есть несколько внешних библиотек JavaScript для разработки шаблонов в основном index.html

 <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 и нашел решение - для рендеринга библиотек JS методом ComponentDidMount()

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

Но даже это решение не работает.Пожалуйста, помогите решить эту проблему.

Спасибо

Answer 1

Вот как я импортирую Jquery в мое приложение create activ

Jquery:

1. первый запуск npm install jquery
2. index.js

import * as $ from 'jquery'

window.jQuery = window.$ = $

см .: http://blog.oddicles.org/create-react-app-importing-bootstrap-jquery-cleanly-node-js/

В качестве альтернативы вы можете прикрепить сценарии к объекту окна и затем вызывать их по мере необходимости:

Попробуйте выполнить следующие действия:

включая ссылку на внешний файл js в вашем /public/index.html использовать внешнюю библиотеку с окном префикса. например, 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 2

Попробуйте вызвать событие, используя объект окна. ссылка <a href="https://github.com/facebook/create-react-app/issues/3007#issuecomment-357863643">Link</a>

Answer 3

Вы можете установить эти js-файлы на объекте окна, а затем получить к нему доступ через window.your_name к объекту.

Вы должны установить это в индексном файле

Answer 4

Попробуйте использовать import() внутри componentDidMount()

Функция import () не требует пояснений. Это просто импорт файлов JavaScript.

import('your_URL')

Answer 5

Вы используете componentWillMount() вместо componentDidMount().

Я думаю, что здесь проблема.