Bases des accessoires : partie 1

Il s'agit d'un tutoriel convivial pour les débutants sur la façon d'utiliser les accessoires. Il est important que vous compreniez ce qu'est la déstructuration et comment utiliser/créer des composants avant de lire.

Props, abréviation de propriétés, les accessoires nous permettent d'envoyer des informations des composants parents aux composants enfants, il est également important de noter qu'ils peuvent être n'importe quel type de données.

Il est impératif de comprendre la syntaxe de création d'un accessoire pour l'un de vos composants. Dans React, vous devez utiliser la même syntaxe pour écrire un attribut pour une balise html. La façon dont nous spécifions un accessoire est de le placer dans notre élément comme ceci :

ParentPlant() {
  return <ChildPlant text="Hey Farmer! Says plant" number={2} isPlant={true} /> 
}

Une bonne règle à retenir lors de la création de Props est la suivante : les chaînes n'ont pas besoin d'avoir des accolades autour de leur valeur, nous ne le faisons que pour les autres types de données. Comme vous pouvez le voir ci-dessus, nous pouvons avoir une multitude d'accessoires en les attribuant au composant parent. Lorsque nous avons nos accessoires dans notre composant, il est important de savoir que nous les les transmettons techniquement. Une fois que nous transmettons nos accessoires, nous devons être en mesure de les recevoir dans le composant souhaité. Dans ce cas, notre composant ChildPlant.

Réception d'accessoires :

function ChildPlant(props) {
  return (
    <>
      {props.text} {props.number}
    </>
  )
}

Nous faisons les choses ici : 1. Nous recevons notre prop dans le paramètre de notre composant ChildPlant, 2. Nous déstructurons les valeurs de notre prop via le nom de notre prop. Il est important de savoir que nos accessoires n'est pas un paramètre mais plutôt des fonctions similaires à un seul.

La seule façon de transmettre les données du composant parent à son composant enfant est via des accessoires. J'aime y penser comme l'ADN, un composant parent contient des aspects de lui-même déjà existants en lui. Parce que cet enfant peut également avoir des aspects de l'ADN de ses parents, les accessoires fonctionnent comme un activateur qui rend les cheveux de cet enfant roux, noirs ou blonds.

Les accessoires sont reçus dans la fonction enfant et sont envoyés via la fonction parent, mais les accessoires ne peuvent être envoyés que vers le bas et jamais renvoyés vers le haut. Nous pouvons également considérer les accessoires comme des objets. En effet, ils contiennent essentiellement des données semblables à des paires clé: valeur. Pour revenir sur la raison pour laquelle ils sont similaires aux paramètres, c'est qu'ils stockent plusieurs objets en leur sein. J'aime penser à la zone où les accessoires sont reçus comme espaces réservés. Ils occupent de l'espace pour un objet que nous souhaitons partager avec notre composant et les échangeons lorsque nous en avons besoin, via la déstructuration et la notation par points.

Voici une bonne façon de le visualiser :

Ici, nous pouvons visualiser les accessoires contenant tout dans nos boîtes carrées, chacun contenant sa valeur de données respective de notre premier exemple. Maintenant, nous utilisons simplement notre méthode de déstructuration pour récupérer la valeur de notre accessoire. Et voilà comment utiliser les accessoires en un mot !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!