Comment puis-je utiliser jquery-scrollto dans rea?

Question

J'utilise browserify pour construire des composants de réaction. Et j'ai besoin d'utiliser npm jquery-scrollto plugin https://www.npmjs.com/package/jquery-scrollto, mais cela ne fonctionne pas.

Je ne comprends pas comment il peut être utilisé? Peut-être

var $   = require('jquery'); 
var ScrollTo  = require('jquery-scrollto'); 

ScrollTo('#myelem'); 

Ou autre chose ...

Answer 1

Même si vous utilisez browserify, jquery.scrollTo est encore un plugin jQuery et devrait être appelé $ (...). ScrollTo (...).

Vous avez encore besoin d'exiger si elle s'ajoute à jQuery.fn, quelque chose comme ceci:

var $   = require('jquery'); 
require('jquery-scrollto'); 

$(window).scrollTo('#myelem', 1000); 

Visitez le Github page pour la documentation.

Answer 2

Il y a deux choses les scrollTo besoins: la chose à faire défiler (comme window ou un div) et la cible (#myelem dans votre exemple). La chose que vous voulez faire défiler devrait être un objet jQuery, c'est pourquoi @Ariel Flesler conseillé de l'envelopper comme ceci: $(thingToScroll). Avant d'en arriver là, si vous utilisez Browserify, vous devez importer correctement jQuery et le plug-in. J'ai googlé comment faire cela et est sorti plus confus- ne semble pas simple. Voici un post qui ressemble à ça: Configure a generic jQuery plugin with Browserify-shim?

Mais je suggère de ne même pas essayer, puisque l'utilisation de ce plug-in avec React est probablement plus de problèmes que cela en vaut la peine. Si vous voulez simplement faire défiler window il ne peut pas être si mauvais, mais si vous voulez faire défiler des éléments de la page, vous devrez aller et venir entre le DOM virtuel de React et le DOM réel sur la page en utilisant ref s http://facebook.github.io/react/docs/working-with-the-browser.html. Si vous avez décidé d'utiliser React, il vaut mieux utiliser JavaScript et l'API DOM standard plutôt que jQuery. Un avantage de jQuery est de faire le travail sur les incohérences et les bogues dans les implémentations DOM des navigateurs. Réagir fait aussi partie de ce travail pour vous dans les coulisses. Donc, la version courte est qu'il sera plus facile de choisir si vous voulez utiliser React ou utiliser jQuery. Si ne pas aller plus jQuery, la documentation de l'API du navigateur pourrait aider MDN:

https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView