L'essentiel de React.js

Passer des paramètres

Testez gratuitement nos 1324 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Comme avec tout système de routing, vous avez la possibilité de passer des paramètres de route et de les récupérer pour les utiliser.
04:56

Transcription

Maintenant qu'on a appris à faire des liens, il serait intéressant de savoir comment on va "pather" des paramètres. Je m'explique. Par exemple ici, on a un path qui est un path user. En fait on aimerait bien un path dit play solders. Concrètement, je peux "pather" tout ce que je veux j'irai toujours sur le UserComponent, et ça pourrait me permettre de récupérer des informations. Pour faire ça, il va falloir deux choses. Il va falloir d'abord définir quel est le paramètre. Pour définir un paramètre que l'on peut passer à une route, c'est très simple. Il suffit simplement de définir deux points et le nom du paramètre. Bien évidemment, vous pouvez le faire soit ici dans une imbrication, soit directement sur un path complet. Par exemple ça pourrait être user/: puis un nom de paramètre. Alors ici, on pourrait par exemple "pather" un name. Bien sûr, étant donné qu'on est dans une imbrication, je vais faire : name. Ce qui veut dire que, au final, ma route ce sera ça : /users / : name. En fait, ce que je veux. Ce paramètre peut correspondre à tout et n'importe quoi. J'en fais absolument ce que je veux. Quand vous allez être comme ça, dans un paramètre à "pather", soit vous allez utiliser user directement comme ça et puis vous allez "pather" en mode brut un paramètre directement et ça va matcher dessus, soit vous allez devoir le construire. Pour le construire, il va falloir quelque chose à un endroit ou à un autre. Pour le construire, on pourra tout à fait utiliser quelque chose qui provient d'une variable, qui provient de notre class qui est disponible. On verra ça un petit peu plus tard. Par exemple si je pointe vers Users ça veut dire que je devrais pouvoir récupérer ce paramètre-là. Alors déjà on va vérifier qu'en faisant la modification comme ça, il n'y a pas de problème, tout fonctionne. Je recharge. Je vais aller sur un seul utilisateur. Effectivement, je suis bien redirigé sur la page un seul utilisateur. Donc ça, ça fonctionne. Maintenant, comment je récupère ce paramètre ? Ce paramètre est "pathé" quelque part. Je dois pouvoir le récupérer à un endroit donné. Sur le UserComponent, vous allez pouvoir créer un constructeur. On a déjà vu ça, évidemment. Dans ce constructeur, il va y avoir une particularité on va lui "pather" directement les props. dans la méthode du constructeur, Vous n'oublierez pas de mettre un super et de "pather" les props à l'intérieur. Il faut le faire si vous avez un constructeur qui prend quelque chose. Il faut le "repather" dans le super du React.Component sinon, vous ne pourrez pas y accéder plus tard. Puis on va faire un console.log des props. Comme ça on va voir exactement ce qui se trouve dedans et on va pouvoir regarder un petit peu si on n'aurait pas, par hasard, le paramètre name quelque part. On va retourner de l'autre côté. On va recharger. Cette fois-ci, on va avoir un console.log qui arrive. Effectivement, dans ce console.log, si on va introspecter un petit peu, on verra qu'on trouve tout un tas de choses notamment l'history. History, c'est l'historique de navigation, la location c'est-à-dire où on se trouve exactement, on a le path name, on a la clé actuelle, clé de rechargement, de rafraîchissement. On a l'action, pop, push, on sait ce que ça fait. On a beaucoup d'infos. Ensuite on va avoir les params, et là regardez. C'est magique ! On a bien le name et actuellement, il est "seté" à users. Alors évidemment, étant donné que c'est un play solder ici je pourrais mettre n'importe quoi. Je pourrais mettre Toto, rafraîchir ma page. Je serai redirigé exactement sur la même page. Là il va falloir faire entrée. Par contre, dans les params, ici, au niveau du name, ce sera Toto. C'est ça que vous avez défini dans la route, tout en bas, en tant que name. Du coup, il est construit automatiquement. C'est un objet, c'est des params. Et c'est récupérable. Maintenant si je veux les afficher dans mon template, il va suffir simplement que je crée ici une variable par exemple this.name qui va être égal à props. Il faut aller chercher le bon. donc params.name et je récupère le name qui se trouve sur params, dans les props. Généralement, on ne va pas utiliser params mais plutôt route params parce que c'est vraiment les paramètres de route que l'on recherche. Sachant que vous allez l'avoir aux deux endroits. Il va le mettre dans params et dans route params, vu que ce sont les route params, autant donner l'information à de futurs développeurs et utiliser routeParams.name. On sait que c'est un paramètre qui provient du routing, comme ça au moins, l'information est claire. Si ensuite j'ai envie de l'afficher, c'est toujours pareil, on va simplement l'afficher à la React, c'est-à-dire avec des ouvertures fermetures d'accolades et on va utiliser this name. Ce qui fait qu'ici, quand je vais recharger, je vais avoir automatiquement Toto à cet endroit-là. Je peux "pather" tout ce que je veux donc faire du routing un peu dynamique Ça pourrait être un ID, ça pourrait être tout ce qu'on veut, il n'y a aucun problème. Quand je vais recharger, je vais automatiquement avoir la bonne information. On va pouvoir le dynamiser après ce n'est pas un problème. On va pouvoir dynamiser cette information et puis la mettre sur des liens. Mais là vous voyez, par la pratique comment on "path" un paramètre dans une route directement.

L'essentiel de React.js

Exploitez pleinement React.js ! Créez des composants web complexes rapidement, découvrez leurs relations ainsi que leurs cycles de vie, passez en revue la navigation, etc.

3h28 (49 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
React.js React.js 15.3.2
Spécial abonnés
Date de parution :27 oct. 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !