Разрешение jQuery внутри React компонента

113
18 ноября 2019, 03:20

Как React компоненту позволить запустить jQuery код из файла main.js?

Есть такой код в файле main.js 

$('.category-menu > li').hover(function(e) {
  $(this).addClass('active')
  e.preventDefault()
})
$('.category-menu').mouseleave(function(e) {
  $('.category-menu li').removeClass('active')
  e.preventDefault()
})

ему нужно работать в компоненте, но место этого ничего. Кто сталкивался с подобным?

Answer 1

Если main.js - это сборка (webpack, gulp и т.д.) то

npm install jquery --save

В стартовом файле сборки:

let $ = require('jquery');
window.$ = window.jQuery = $;

из компонентов реакта вызывается как обычно, но надо учесть, что на момент вызова jQuery с селекторами некоторые элементы могут быть просто не отрисованы, поэтому селекторы ничего не находят. Все зависит от конкретного случая. Но лучше конечно не смешивать, иначе можно получить непредсказуемые эффекты

Если main.js - это просто скрипт, содержащий вызовы jQuery, то добавьте на вашу страницу загрузку jQuery из локального каталога или с CDN перед подключением скрипта main.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="/js/main.js"></script>

или (если есть jquery на локальном сервере)

<script src="/js/jquery.min.js"></script>
<script src="/js/main.js"></script>
READ ALSO
Непонятный синтаксис в JS { enter }
javascript

Непонятный синтаксис в JS { enter }

Что означает такой тип записи? Я немного недопонимаю

 121
Модальное окно и табы
javascript

Модальное окно и табы

Как данный код понимает, что я нажимаю на именно данный таб? Он должен выводить модальное окно при нажатии на кнопку в табе

 101
HTML5 Video Buffered не правильное срабатывание onprogress в Firefox
javascript

HTML5 Video Buffered не правильное срабатывание onprogress в Firefox

Получаю значение буферизации следующей функцией по событию progress

 110
Распарсить массив из json
javascript

Распарсить массив из json

Есть json файл с названием examplejson

 132