Comment intégrer le plugin jQuery de Réagir
Je veux utiliser https://github.com/t1m0n/air-datepicker avec une Réagir application, mais il ne fonctionne pas.
JS:
import React from 'react';
import AirDatepicker from 'air-datepicker';
class Datepicker extends React.Component {
render() {
return(
<AirDatepicker />
)
}
}
export default Datepicker;
`
HTML:
<script src="./../bower_components/jquery/dist/jquery.min.js"></script>
Ce produit:
error($ is not defined)
Une autre approche:
JS:
import React from 'react';
import $ from 'jquery';
import AirDatepicker from 'air-datepicker';
class Datepicker extends React.Component {
render() {
return(
<AirDatepicker />
)
}
}
export default Datepicker;
Même erreur.
Comment puis-je intégrer un plugin jQuery avec Réagir?
- Avez-vous ngp installer jquery lorsque vous avez essayé de l'importer?
- Suivre github.com/ryanflorence/react-training/blob/gh-pages/lessons/... . Cette question est trop vaste pour stackoverflow.
- github.com/ryanflorence/react-training/blob/gh-pages/lessons/... est obsolète
- Raymond, oui, je mnp installé jquery
- c'est peut-être parce que j'utilise réagir-créer-app
Vous devez vous connecter pour publier un commentaire.
Tout d'abord
air-datepicker
est de ne pas Réagir composant, c'est le plugin jQuery, donc il ne fonctionne pas comme dans votre exemple.Deuxièmement, pour le bon travail, jQuery devraient être disponibles dans le contexte mondial, la plupart des esiest façons de le faire est de l'inclure dans la page via
<script>
tag. Il devrait être inclus avant plugin script.Pour vérifier si il est vraiment inclus et disponible dans le monde entier, il suffit de taper dans une console Chromée
window.jQuery
et appuyez sur Entrer il doit retourner quelque chose commefunction (a,b){...}
. Si non, quand vous faites quelque chose de mal, vérifiezsrc
attribut de<script>
balise, peut-être qu'il en pointant à la mauvaise destinationComment l'obtenir, il a travaillé dans de Réagir?
Eh bien, la plus simple façon est juste pour initialiser le plugin sur n'importe quel élément du DOM dans votre composant, comme régulièrement en JavaScript.
JS:
HTML:
En tant que composante distincte
Très simple datepicker Réagir composant exemple
JS:
HTML:
Aussi n'oubliez pas d'inclure css fichiers.
air-datepicker
n'est pas la Réaction d'un composant. C'est le jquery-plugin, afin que nous puissions suivre ce tutoriel https://reactjs.org/docs/integrating-with-other-libraries.htmlMais toujours pas de travail car la
jquery
pas la dépendance de laair-datepicker
.Suivre le message d'erreur et la façon la plus simple est de merlu l'
air-datepicker
. AjouterjQuery
comme la dépendance à la première ligne de laair-datepicker/dist/js/datepicker.js
Avant:
Après:
Ainsi
<AirDatepicker />
fonctionne bien que la Réaction du composant.