PC & Mobile

14 conseils utiles pour écrire du code plus propre dans les applications React

14 conseils utiles pour écrire du code plus propre dans les applications React


Lorsque vous décidez de votre sortie, faites très attention aux booléens primitifs utilisés pour déterminer la valeur de sortie de quelque chose. Il s’agit d’une odeur de code, ce qui oblige le développeur à examiner le code source / l’implémentation du composant pour pouvoir supposer avec précision le résultat.

Par exemple, supposons que nous ayons déclaré un composant typographie qui utilise les options disponibles: 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'Titre', «sous-titre»

Comment pourriez-vous comprendre comment ils seront appliqués quand ils sont transmis de la sorte?

const App = () => (
<Typographie Couleur= "primaire" aligner= "centre" sous rubrique Titre>
Bienvenue dans ma bio

)

Ceux qui sont plus expérimentés avec React (ou plus judicieusement, JavaScript) pourraient déjà deviner que Titre va procéder à sous rubrique. La façon dont la commande fonctionne, le dernier écrasera le précédent.

Mais le problème est que nous ne pourrons pas vraiment dire à quel point Titre ou sous rubrique sera appliqué sans regarder le code source.

Par exemple:

Même si Titre gagne dans ce cas, le text-transform: majuscule La ligne CSS ne sera toujours pas appliquée. Ceci est dû au fait sous rubrique déclare une spécificité supérieure avec text-transform: none! important; dans sa mise en œuvre.

Si nous ne sommes pas assez prudents, il pourrait devenir très difficile de résoudre un problème de style, surtout s’il n’affiche pas d’avertissements / d’erreurs sur la console. Cela peut compliquer la signature du composant.

Voici un exemple d'alternative plus propre pour ré-implémenter le Typographie composant qui résout le problème:

const App = () => 
<Typographie une variante= "title"> Bienvenue sur ma bio

Typographie

Maintenant quand on passe variante = "titre" dans le App composant, nous serons assurés que seulement Titre sera appliqué. Cela nous évite d'avoir à examiner le code source pour déterminer le résultat.

Vous pouvez aussi simplement faire un simple if / else pour calculer l'accessoire:

Mais le principal avantage de ceci est que vous pouvez simplement faire ce one-liner simple, propre et appeler un jour:

const résultat = styles[variant]
Show More

SupportIvy

SupportIvy.com : Un lieu pour partager le savoir et mieux comprendre le monde. Meilleure plate-forme de support gratuit pour vous, Documentation &Tutoriels par les experts.

Related Articles

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Close
Close