Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

L'essentiel de React.js

Cloner des éléments

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
De temps en temps, vous aurez besoin de cloner des éléments pour les utiliser à un endroit différent. En changeant les propriétés, un utilitaire peut vous aider à le réaliser.
03:24

Transcription

On va parler d'un petit module qui peut être intéressant, mais attention! Car vous l'aurez de temps en temps dans la documentation de React. Ce qui attire votre attention, car elle peut contenir des éléments... qui sont entièrement dépréciés. Et quand c'est déprécié, il faut éviter de les utiliser. Mieux vaut regarder autre chose que d'utiliser ce qui est déprécié. Ce module est un plug-in React déprécié mais intéressant. Voyons pourquoi. De temps en temps on aura besoin de cloner des éléments. Vous pourrez avoir du mal à le lire ici. Alors je vais vous l'expliquer. On fait un render ici, puis on crée une variable blueChildren... qui fera un React.Children.map. Ça récupérera tous les enfants qu'on a dans le rang du React... et les passer dans une dongle. Ici, on aimerait bien pouvoir cloner l'élément... et lui changer ses propriétés et évidemment... le retourner ensuite ici dans le render. C'est facilement faisable, mais comment? On va utiliser ce petit plug-in react... et celui-ci fera juste un return withProps. CloneWithProps sera donc le clonage de l'élément. Ainsi, on va cloner l'élément qui s'appelle Blue, donc le p ici... et ça va maper ce qui se trouve dans Children.map. Ça va venir itérer et récupérer les informations. Ici, ça va récupérer cette partie "This text is blue"... puisque ça sera le Children direct de Blue défini au-dessus. Quand on va le cloner on va lui appliquer du style. Vous pouvez donc bien changer ses propriétés. Le Children.map appliquera makeBlue... qui est la fonction qui utilisera clonewithProps. C'est pas vraiment compliqué. Ça nous permet de faire des clones d'éléments. C'est donc important, car on aura tendance à utiliser le clone d'éléments... au travers d'une fonction react implémentée par elle et non à la main. Utilisez les outils react si vous devez faire des clones d'élements. On peut aussi changer des propriétés... car on pourra travailler sur des props d'un clone et le transformer. On peut donc en avoir deux différentes sur la page... sur lequelles on pourra travailler de façon unitaire. Voilà pour cette petite utilitaire et surtout regardez bien on a un cloneElement Il faudra donc allé voir sur React... car ça veut dire qu'ici dans la Top-Level API... on a le cloneElement implémenté qui peut être utilisé directement sur React... qui est bien plus simple que d'utiliser un plug-in. Vous verez qu'au fur et à mesure des évolutions... ils feront évoluer React et ajouter des plug-in à la librairie de base... car ce sont des choses que les gens utiliseront assez souvent. Du coup on en a besoin plus ou moins dans React et non pas en add-on. Les add-ons risquent disparaître peu à peu. On voit déjà certains se déplacer pour rejoindre directement l'accord API. Ce qui n'est pas mauvais en soi. Ça nous évite d'avoir en plus de ça à rajouter encore des fichiers... et ça ne prend pas assez de place, car ce sont de petites fonctions.

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
Votre/vos formateur(s) :
Date de parution :27 oct. 2016
Durée :3h28 (49 vidéos)

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 !