Как подключить jquery к react
How to use jQuery in your React App
We are all familiar with jQuery and at some point of time, we all want to know how we can use jQuery in our react app. When I was a beginner in react I wanted to know how I can use jQuery in my react app. I checked many tutorials available on the internet how we can use jQuery in react app some were easy to understand and some of them were only misguiding. Today I will show how you can easily use jQuery to manipulate DOM in your react app.
Requirements
2. Now open project in your favorite IDE and import jquery to the file where you want to manipulate DOM.
3. Now create a function and put your jquery code inside that function. For this tutorial purpose, I have created a lorem ipsum text and button and I will use jQuery CSS API to change the color of lorem ipsum text by clicking on that button.
4. Now call that function inside the componentDidMount lifecycle method.
5. That’s it Now run react app in your browser to test.
Here are the live example and git repository
3.17 Интеграция со сторонними библиотеками
3.17.1 Интеграция с плагинами манипуляции DOM
React не знает об изменениях, внесенных в DOM вне контекста React. Он определяет обновления, основанные на собственном внутреннем представлении, и если одни и те же узлы DOM управляются другой библиотекой, React запутывается и не имеет возможности восстановления.
Это не означает, что невозможно или чрезвычайно сложно совместить React с другими способами воздействия на DOM, вам просто нужно понимать, что каждый из них делает.
3.17.1.1 Как подойти к проблеме
Чтобы это продемонстрировать, давайте построим обёртку для известного плагина jQuery.
Мы добавим атрибут ref к корневому элементу DOM. Внутри componentDidMount мы получим на него ссылку, чтобы можно было передать его в плагин jQuery.
Чтобы предотвратить взаимодействие React с DOM после монтирования, мы вернем пустой тег
3.17.1.2 Интеграция с JQuery UI Dialog плагином
Во-первых, давайте посмотрим, что Dialog делает с DOM.
Если вы вызываете Dialog на узле DOM
Предположим, что это API, к которому мы стремимся с помощью нашего React-компонента-оболочки :
Важно знать, что если вы измените DOM вне потока React, вы должны убедиться, что у React нет оснований касаться этих узлов DOM.
Далее мы реализуем метод жизненного цикла. Нам нужно инициализировать Dialog с помощью ссылки ref на узел
Обратите внимание на одну очень важную деталь: как мы вызываем диалог из приложения.
Но чтобы данный метод вызвался, нам необходимо демонтировать наш диалог. Для этого нам понадобится атрибут onClose для диалога, которому мы присвоим метод-коллбэк, выставляющий isDialogShowed в false :
У самого компонента диалога будем использовать коллбэк onClose в componentDidMount :
3.17.2 Интеграция с другими библиотеками
Фактически, именно так React используется в Facebook. Это позволяет разработчикам Facebook писать приложения на React по частям и комбинировать их с уже существующими, сгенерированными сервером шаблонами и другим клиентским кодом.
3.17.2.1 Замена отрисовки, основанной на строках, на React
. может быть переписана с использованием компонента React:
Теперь вы можете начать перемещать больше логики в компонент и применять наиболее распространенные практики React. Например, в компонентах лучше не полагаться на идентификаторы, потому что один и тот же компонент может отображаться несколько раз.
Вместо этого мы будем использовать систему событий React и зарегистрируем обработчик кликов непосредственно в элементе React :
Взаимодействие со сторонними библиотеками
React может использоваться в любом веб-приложении. Он может быть встроен в другие приложения, и, с некоторыми оговорками, другие приложения могут встраиваться в React. Это руководство рассматривает некоторые общие случаи, с упором на интеграцию с jQuery и Backbone. Те же подходы могут использоваться для интеграции компонентов с любым существующим кодом.
Интеграция с плагинами, изменяющими DOM
React не знает про изменения DOM, которые сделаны вне React. Он определяет обновления на основе своего внутреннего представления, и если одни и те же DOM-узлы управляются другими библиотеками, то это нарушает работу React без возможности её восстановления.
Это не означает, что соединить React с другими инструментами работы с DOM сложно или невозможно. Просто нужно помнить, за что отвечает каждый инструмент.
Самый простой способ избежать конфликтов — предотвратить обновление React-компонента. Это можно сделать через рендеринг элемента, который не должен обновляться React, например, пустой
Как решить проблему
Для демонстрации давайте набросаем обёртку вокруг обобщённого jQuery-плагина.
Мы установим реф на корневой DOM-элемент. Внутри componentDidMount мы получим ссылку на этот реф и передадим её в jQuery-плагин.
Чтобы React не взаимодействовал с DOM после монтирования, вернём пустой
Интеграция с jQuery-плагином Chosen
То, что следующий способ работает, совсем не значит, что это оптимальное решение для React-приложений. Мы советуем пользоваться React-компонентами, когда это возможно. Они являются самым простым способом повторно использовать код в React-приложении, и часто дают больший контроль над своим поведением и внешним видом.
Для начала, давайте посмотрим, что Chosen делает с DOM.
Допустим, мы хотим предоставить следующий API для нашего компонента-обёртки над :
Для простоты мы будем реализовывать неуправляемый компонент.
Обратите внимание, что мы обернули в дополнительный
В завершение осталось сделать ещё кое-что. В React пропсы могут изменяться со временем. Например, компонент может получать разные дочерние элементы, если состояние родительского компонента изменяется. Это означает, что в точке интеграции нам нужно вручную обновлять DOM, в соответствии с обновлениями проп, так как React больше не управляет DOM для нас.
Таким способом Chosen узнает, что нужно обновить его DOM-элемент, когда дочерние элементы были обновлены React.
Полная реализация Chosen компонента выглядит так:
Интеграция с другими визуальными библиотеками
Благодаря гибкости ReactDOM.render() React может встраиваться в другие приложения.
Хотя обычно React используют для загрузки в DOM одного корневого компонента, ReactDOM.render() может быть вызван несколько раз для независимых частей UI. Это могут быть как отдельные кнопки, так и большие приложения.
На самом деле, именно так React используется в Facebook. Это позволяет писать приложения на React по частям и объединять их с существующими генерируемыми сервером шаблонами и другим клиентским кодом.
Замена строковых шаблонов с помощью React
Итак, есть текущая реализация на jQuery…
…может быть переписана в React-компонент:
А дальше вы можете начать переносить логику внутрь компонента и использовать остальные React-подходы. Например, в компонентах лучше не полагаться на идентификаторы, потому что один и тот же компонент может быть отрендерен несколько раз. Вместо этого мы используем событийную систему React и зарегистрируем обработчик непосредственно на React-элементе :
Вы можете завести столько изолированных компонентов, сколько вам захочется. И использовать ReactDOM.render() для рендеринга в разные DOM-контейнеры. Постепенно, по мере перевода вашего приложения на React, вы сможете комбинировать их в большие компоненты и переносить вызов ReactDOM.render() вверх по структуре.
Встраиваем React в представления Backbone
Представления в Backbone обычно используют HTML-строки или функции, создающие строковые шаблоны для создания DOM-элементов. Этот механизм также может быть заменён рендерингом React-компонентов.
в DOM-элемент, предоставляемый Backbone ( this.el ). Также мы воспользуемся ReactDOM.render() :
Когда компонент удаляется из дерева React изнутри, очистка производится автоматически, но поскольку мы удаляем сущность из дерева вручную, то обязаны вызвать этот метод.
Интеграция со слоем моделей
Обычно рекомендуется использовать однонаправленный поток данных, вроде состояния React, Flux или Redux. Но React-компоненты могут также использовать слой данных из других библиотек и фреймворков.
Использование моделей Backbone в React-компонентах
Самый простой способ использовать модели и коллекции Backbone из React-компонентов — это обработка различных событий и ручное обновление компонентов.
В следующем примере компонент list рендерит Backbone-коллекцию, используя компонент Item для рендеринга отдельных элементов.
Вынос данных из моделей Backbone
Подход, показанный выше, требует, чтобы ваши React-компоненты знали о наличии моделей и коллекций Backbone. Если у вас в планах есть переход на другое решение для управления данными, вы, возможно, захотите максимально уменьшить связь с Backbone.
При этом подходе только компоненты высшего порядка будут знать о Backbone-моделях, а большая часть компонентов в приложении не будет завязана на Backbone.
Обратите внимание, пример ниже не является полным в отношении работы с Backbone. Но он должен дать вам понимание общего подхода:
Для демонстрации использования мы соединим React-компонент NameInput и Backbone-модель и будем обновлять её атрибут firstName при каждом изменении поля ввода:
Этот подход не ограничивается Backbone. Вы можете использовать React с любой библиотекой для работы с данными, просто подписываясь на методы жизненного цикла и, при необходимости, копируя данные во внутреннее состояние React.
Как подключить jquery плагин в react приложении
Мой компонент React «должен» рендерить немного HTML, а потом применять к нему jQuery-плагин.
Но вместо этого прямо в момент импорта плагина я получаю:
TypeError: Cannot read property ‘fn’ of undefined
1 ответ 1
это не прямой ответ и наверное автору он уже не нужен, но возможно поможет найти ответ другим людям в случае подобных сообщений об ошибке. поскольку текст ошибки сообщает Cannot read property ‘fn’ of undefined, что означает, что он не может обратиться к свойству ‘fn’ неопределенного объекта (undefined), то предположить можно что надо определить сам объект или, если он уже где-то определен, то уже проблема с областью видимости переменных, потому в этом месте этого объекта нет. поскольку в данном случае происходит обращение к неопределенному объекту, то и свойств у него нет. у меня такие ошибки показывались именно в случае когда не было переменной или функции к которой обращался или она не была видна в конкретном месте.
Всё ещё ищете ответ? Посмотрите другие вопросы с метками jquery reactjs или задайте свой вопрос.
Похожие
Подписаться на ленту
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
дизайн сайта / логотип © 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.12.20.41044
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
React/ReactJS: Using a jQuery Plugin with React
React already has a handful of useful UI components for most of our front-end needs; the official site maintains a list here. Also, there is Reactstrap which provides ready-to-use stateless Bootstrap 4 components like accordions, datepickers, modals, tooltips, etc., compatible wth React 16+.
But a developer sometimes fancy a plugin created for a much older library like jQuery and wants to use it in his/her React project (of course, time congestion very often necessitates such unwarranted move). This tutorial will show you how to use jQuery with React and on using jQuery plugins with React in general.
For our example, we pick a simple jQuery plugin called jCirclize, which loads a given percentage value in circle. We will learn how to import the plugin and use it inside a React component.
The first thing to do is to install the jQuery package using npm.
Import them (along with jQuery) into the file where your component would be.
We create a new component called
and arrange the code for using a jQuery plugin similar to what is documented in React’s official site here. The plugin is destroyed inside the componentWillUnmount() method, which happens whenever the user moves away from the component. There is a callback ref referencing the
Now if you try to render this
component, the console will throw an error ‘ jQuery is not defined no-undef ‘.
To fix this, open the jCirclize.js file and paste the below import statement at the very beginning of the file.
On successful rendering of the component, the plugin loads as below.
Options for the jCirclize Plugin
Now this section is about customizing the plugin and is not much related to the topic anymore. And should the plugin serve no purpose for your project, you can scroll up.
We will change the stroke (the thickness of the circle), the percentage value and the background colour of the circle. As in most customizable jQuery plugins, the options are passed as property-value pairs of an object literal to the plugin method.
We get our customized circular percentage loader.