Внешний Javascript не работает в react.js
Я создаю приложение для реагирования, используя 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.
Я погуглил и нашел решение -
Для рендеринга JS-библиотек методом ComponentDidMount()
ComponentDidMount(){
loadjs('./js/main.js', function(){
loadjs('./js/common_scripts.js)
});
}
Но даже это решение не работает. Пожалуйста, помогите решить эту проблему.
Спасибо
Я использовал объект window, чтобы использовать функции jquery и события import $ from 'jquery'; в основном index.js, а затем получить доступ к любым событиям jquery, таким как componentDidUpdate(nextProps, nextState) { window.$('.hero_single').addClass('start_bg_zoom'); }
спасибо за ответ, но я новичок в разработке интерфейса, поэтому я не понял, что вы сказали, у меня есть несколько внешних файлов js, как в вашем случае, таких как jquery, bootstrap, owl.carousel, хороший выбор и настраиваемый файл main. js, который включает в себя всю инициализацию и т. д. Как я могу заставить всю страницу работать нормально
@AzadHussain, можешь ли ты найти исправление? Я столкнулся с той же проблемой
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 6
Вы используете componentWillMount() вместо componentDidMount().
Я думаю, что в этом проблема.
Вы можете установить эти js-файлы в объекте окна, а затем вы можете получить к нему доступ с помощью window.your_name для объекта ..
Вы должны установить это в индексном файле
Попробуйте использовать import() внутри componentDidMount()
Import () не требует объяснений - он просто импортирует файлы JavaScript.
import('your_URL')
Привет, я пробовал, но он дает ошибку vriables, например Line 3: 'WOW' is not defined no-undef Line 3: 'Switchery' is not defined no-undef Line 3: Unexpected use of 'location' no-restricted-globals Line 3: Unexpected use of 'location' no-restricted-globals
похоже, вы пытаетесь импортировать файл миниатюрной версии JQuery. Используйте JQuery из NPM ссылка на сайт
Я использую jQuery из NPM для запроса Ajax.
Так что избегайте импорта jquery. попробуйте динамически импортировать остальные файлы.
Попробуйте вызвать событие, используя объект окна. ссылка <a href = "https://github.com/facebook/create-react-app/issues/3007#issuecomment-357863643">Link</a>
Вот как я импортирую JQuery в свое приложение для создания реакции
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/
В качестве альтернативы вы можете прикрепить сценарии к объекту окна, а затем вызывать их по мере необходимости:
Попробуйте выполнить следующие шаги:
включая ссылку на внешний файл 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());
});
`
Смотрите это для более подробной информации:
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)
}, [])
Я столкнулся с той же проблемой. Вы получили какое-нибудь решение?