J'ai créé le composant séparé, A, bien sûr, pour vous entraîner à créer vos propres composants, mais B, également
parce que c'est vraiment la philosophie de base de réagir pour diviser votre application en plus petits morceaux.
Bien sûr, c'est à vous de décider à quel point vous voulez le diviser.
Chaque élément de liste, par exemple, pourrait également être son ancien composant, et il n'y aurait rien de mal à
cela.
L'idée est simplement d'avoir de petits fichiers de code gérables.
Et plus tard, une fois que nous ajoutons plus de logique à l'application afin que nous puissions également interagir avec elle.
Et nous avons changé un certain nombre d'objectifs, par exemple, en cliquant sur un bouton, etc.
Bien sûr, nous voulons être en mesure de gérer une grande partie de la logique dans le composant de la liste d'objectifs et non
des composants évidents.
Donc, vraiment le diviser en composants a l'idée de séparer les préoccupations de garder vos fichiers petits, concentrés et gérables, ce qui,
si vous travaillez dans des projets plus importants, est une énorme victoire car il facilite beaucoup la gestion et
le travail dans un tel plus grand projet.
Maintenant, jusqu'à présent, tout dans notre application est codé en dur, cependant.
Maintenant, plus réaliste serait que disons que notre liste d'objectifs est gérée ici dans l'application.
Oui, comme données.
Et nous voulons rendre la liste Digo H des éléments Timal ou J en tant qu'éléments X en fonction de ces données.
Maintenant, je vais le gérer ici dans Abcess simplement parce que plus tard, je vais ajouter un autre composant ici qui nous aide à
créer de nouveaux objectifs.
Mais pour l'instant, ajoutons simplement une constante normale ici.
Composant fonctionnel de Tudor car il s'agit d'une fonction JavaScript normale.
Bien sûr, vous pouvez faire plus que simplement renvoyer le contenu X et le disque de J ici.
Nous aurons mes objectifs de cours.
Vous pouvez le nommer comme vous le souhaitez et ce sera un tableau et un tableau.
Chaque objectif peut être un objet JavaScript créé ici avec la notation littérale de l'objet.
Bien sûr, vous pouvez également créer votre propre classe ou fonction constructeur et l'instancier pour créer un
tel objet.
Supposons maintenant que chaque objectif ait une idée.
C. G. un pour chorus chorus, appelez-en un, puis a du texte, disons.
Et le texte ici est simplement le texte.
J'ai codé en dur ici, terminer le cours.
Je copie donc cela.
Et à ceci ici et je vais diviser sur plusieurs lignes pour le rendre plus facile à lire parce que je n'aurai pas qu'un
seul objectif mais gratuit.
Les idées sont donc C. G. à NCG gratuitement, disons.
Et maintenant, je vais juste copier tout ce texte ici.
Dans mes objets ici à Abcess.
Aussi, ce dernier texte.
Comme ça, et là, je peux maintenant aussi me débarrasser de cette esperluette ici, nous n'en avons pas besoin ici.
Nous pouvons tous mettre le texte comme ceci et réagir le rendra correctement.
Alors maintenant, nous devons griffonner le tableau Scholes à mon idée.
Maintenant, est-ce dans la composante de la liste des objectifs de ces objectifs?
Ces données devraient finalement être sorties.
Il devrait donc être sorti dynamiquement dans ce composant, dans le composant de liste d'objectifs au lieu d'être difficile.
Nous pouvons donc supprimer ce code ici.
Non, cela nous pose deux problèmes.
Numéro un, comment pouvons-nous sortir une liste de données dynamiquement dans J comme X?
Mais plus important que cela pour le moment.
Comment pouvons-nous obtenir cette liste de données qui est définie dans le composant d'application dans le composant Gollust?
Eh bien, concentrons-nous d'abord sur cela, car sans cela, nous ne pouvons pas nous concentrer sur l'autre problème.
Nous pouvons transmettre des données de composant à composant avec un concept appelé props abréviation de propriétés.
Nous pouvons définir les nôtres.
Vous pourriez dire des attributs qui sont ces accessoires sur nos propres composants.
Ainsi, par exemple, ici sur la liste des objectifs, vous pourriez dire que nous avons des éléments, des attributs ou des objectifs, des attributs qui
vous appartiennent totalement.
J'irai avec des objectifs ici.
Et cet attribut ou accessoire en or est le terme commun.
L'hélice de Gold transmet-elle ensuite ces données à ce composant?
Maintenant, pour cela, je n'utilise pas de chaîne ici, que je veux transmettre, mais
je veux plutôt transmettre ma structure de données JavaScript D tableau ici et pour papa ici, en fait, nous utilisons un nombre
spécial Syntex et J comme X. Nous utilisons des accolades bouclées à ouverture et fermeture simples.
On dirait que nous créons un objet jobs ici, mais ce n'est pas le cas.
Si vous faites cela à l'intérieur de J est X, ce que je fais ici.
C'est J is X, cela signifie que vous voulez fusionner votre code J is X avec une expression JavaScript à la fin.
Et ici, nous pouvons souligner les compétences de base.
Il s'agit d'une expression JavaScript valide.
Nous pointons juste une constante.
Et ce que Disneyland signifie est mort.
React passera.
Objectifs du cours ici.
La valeur stockée dans cette constante dans ce cas, ce tableau dans cet endroit de J est X.
Dans ce cas, dans cet accessoire, donc.
Les objectifs seront donc un accessoire qui contient maintenant une référence à ce tableau.
Maintenant à l'intérieur de la liste de buts, nous pouvons maintenant recevoir cet accessoire d'or.
Allons donc à la liste des objectifs et voyons comment cela fonctionne dans la liste des objectifs.
Nous avons une fonction, non?
Un composant fonctionnel.
Maintenant, cette fonction ne reçoit actuellement aucun paramètre.
Nous pouvons changer cela.
Nous pouvons recevoir un paramètre d'accessoires ici.
Chaque fonction utilisée comme composant React, ce qui signifie qu'elle renvoie J is X, reçoit également des accessoires.
Cet objet passe-t-il automatiquement à votre composant fonctionnel React en réagissant?
Et c'est l'objet qui regroupe tous les accessoires que vous avez passés au composant.
Donc, dans notre cas, l'objectif est de disposer d'un seul accessoire.
Donc, ici, nous aurons un objet qui a une propriété avec le nom de buts qui détient la valeur passée à
cet accessoire.
Donc, en d'autres termes, ici, je pouvais verrouiller la console, prop start objectifs, dot objectifs, parce que j'ai nommé par Propp
objectifs ici.
Si vous avez choisi un nom différent ici, ce qui est parfaitement bien, vous devez utiliser le nom différent ici.
Maintenant, si nous sauvegardons cela, nous ne verrons plus nos objectifs pour le moment.
Mais si nous ouvrons les outils de développement, nous voyons ces Arae être verrouillés ici.
Et le journal de papa vient de la ligne de liste des objectifs six, comme vous le voyez, ce qui
est bien sûr ce journal ici et là, nous voyons nos données d'objectifs, ce qui signifie que oui, il arrive avec succès à l'intérieur du composant Gollust.
Le concept d'accessoires est un concept super important dans React, car c'est ce qui vous permet de transmettre
des données du composant A, le composant d'application au composant B, le composant de liste d'objectifs.
Dans ce cas.
Voyons maintenant comment nous pouvons générer une liste de données dynamiquement dans J en tant que X, car nous avons ici une liste
d'objectifs, un tableau d'objectifs, et nous souhaitons les afficher sous forme d'éléments de liste ici dans notre liste non
ordonnée.