Comment faire un composant de liste avec émotion

En faisant du refactorisation de code à Sentry cette semaine, j'ai constaté que nous manquiez un composant de liste commun qui pourrait être courant entre les projets et les fonctionnalités. J'ai donc commencé à en créer un, mais le problème est: nous utilisons l'émotion pour le style dans Sentry, et je n'ai qu'une compréhension préliminaire de l'émotion, qui est décrite dans sa documentation comme ...

… Une bibliothèque pour écrire des styles CSS à l'aide de JavaScript. En plus de fournir une combinaison de style puissante et prévisible, il offre une excellente expérience de développeur avec des fonctionnalités telles que la cartographie des sources, le taggage et le test des services publics. Les styles de chaîne et d'objets sont pris en charge.

Si vous n'avez jamais entendu parler de l'émotion, l'idée de base est la suivante: lorsque nous travaillons sur une grande base de code avec de nombreux composants, nous voulons nous assurer que nous pouvons contrôler les styles en cascade de CSS. Supposons donc que vous ayez une classe .active dans un fichier et que vous souhaitez vous assurer qu'elle n'affecte pas le style d'un composant complètement autonome qui a également une classe .active dans un autre fichier.

L'émotion résout ce problème en ajoutant des chaînes personnalisées à vos noms de classe afin qu'ils ne contactent pas avec d'autres composants. Voici un exemple de HTML qu'il peut sortir:

<div></div>

Très concis, non? Cependant, il existe de nombreux autres outils et flux de travail qui peuvent implémenter des fonctionnalités très similaires, telles que les modules CSS.

Pour commencer à créer des composants, nous devons d'abord installer l'émotion dans notre projet. Je n'entrerai pas dans les détails car cela dépend de votre environnement et de vos paramètres. Cependant, une fois cela fait, nous pouvons créer un nouveau composant comme celui-ci:

 importer réagir à partir de «réagir»;
Importer Styled à partir de «@ émotion / style»;

Export const list = Styled ('ul') `
  Style de liste: aucun;
  rembourrage: 0;
`;

Cela me semble bizarre parce que nous ne faisons pas seulement<ul></ul> L'élément est écrit avec style, et le composant doit également rendre un<ul></ul> élément. Combiner des marqueurs et des styles en même temps en un seul endroit est bizarre, mais j'aime la simplicité de celui-ci. Cela perturbe juste mon modèle d'esprit et la séparation des préoccupations entre HTML, CSS et JavaScript. Dans un autre composant, nous pouvons importer cela<list></list> Et utilisez-le comme ceci:

 Importer la liste des «composants / liste»;

<list>Il s'agit d'un élément de liste.</list>

Les styles que nous ajoutons au composant de liste seront ensuite convertis au nom de classe (par exemple .oefioaueg ), puis ajouté à celui que nous définissons dans le composant<ul></ul> dans l'élément. Mais nous n'avons pas encore fini! Pour la conception de la liste, je dois pouvoir rendre avec le même composant<ul></ul> et<ol&gt;</ol&gt; . J'ai également besoin d'une version qui me permet de placer des icônes dans chaque élément de liste. Comme ceci: la chose cool (et un peu bizarre) à propos de l'émotion est que nous pouvons utiliser as pour sélectionner l'élément HTML à rendre lors de l'importation du composant. Nous pouvons utiliser cette propriété pour créer notre<ol&gt;</ol&gt; Variantes sans créer des attributs de type personnalisés ou d'autres contenus. Et cela ressemble à ceci:

<list> Cela présentera un UL.</list>
<list as="ol&quot;>Cela présentera un OL.</list>

Non seulement c'est bizarre pour moi, non? Cependant, cela est très intelligent car cela signifie que nous n'avons pas à faire de logique étrange dans le composant lui-même pour changer la balise.

À ce stade, j'ai commencé à noter à quoi pourrait ressembler l'API idéale pour ce composant, car alors nous pouvons revenir à partir de là. C'est ce que j'ai imaginé:

<list>
  <listitem>Article 1</listitem>
  <listitem>Projet 2</listitem>
  <listitem>Projet 3</listitem>
</list>
<list>
  <listitem color="orange400" icon="{<IconBusiness" size="sm"></listitem> }> Article 1
  <listitem color="orange400" icon="{<IconBusiness" size="sm"></listitem> }> Projet 2
  <listitem color="orange400" icon="{<IconBusiness" size="sm"></listitem> }> Projet 3
</list>
<list as="ol&quot;>
  <listitem>Article 1</listitem>
  <listitem>Projet 2</listitem>
  <listitem>Projet 3</listitem>
</list>

Donc, après avoir fait ce croquis, je sais que nous avons besoin de deux composants, ainsi que de pouvoir<listitem></listitem> La capacité d'icher les sous-composants d'icônes. Nous pouvons commencer comme ceci:

 importer réagir à partir de «réagir»;
Importer Styled à partir de «@ émotion / style»;

Export const list = Styled ('ul') `
  Style de liste: aucun;
  rembourrage: 0;
  marge-fond: 20px;

  ol & {
    Counter-Ressest: NumberEdList;
  }
`;

Cette ol& syntaxe spéciale sont ce que nous disons à émotion que ces styles ne sont rendus que dans l'élément comme<ol&gt;</ol&gt; Méthode applicable uniquement. Il est généralement préférable d'ajouter background: red; à cet élément pour vous assurer que votre composant rend correctement le contenu. Ensuite, c'est notre sous-composant<listitem></listitem> . Il convient de noter que dans Sentry, nous utilisons également TypeScript, nous définissons donc notre<listitem></listitem> Avant le composant, nous devons d'abord définir nos accessoires:

 type listItemprops = {
  icône ?: react.reactnode;
  Enfants ?: String | React.reactNode;
  ClassName ?: String;
};

Maintenant, nous pouvons ajouter le nôtre<iconwrapper></iconwrapper> composant, ce sera<listitem></listitem> Ajustement<icon></icon> La taille du composant. Si vous vous souvenez de l'exemple ci-dessus, je veux qu'il ressemble à ceci:

<list>
  <listitem color="orange400" icon="{<IconBusiness" size="sm"></listitem> }> Article 1
  <listitem color="orange400" icon="{<IconBusiness" size="sm"></listitem> }> Projet 2
  <listitem color="orange400" icon="{<IconBusiness" size="sm"></listitem> }> Projet 3
</list>

Le composant IconBusiness est un composant préexistant que nous voulons envelopper<span></span> afin que nous puissions le coiffer. Heureusement, nous n'avons besoin que d'un petit CSS pour aligner correctement les icônes avec le texte, et<iconwrapper></iconwrapper> Tout cela peut être géré pour nous:

 type listItemprops = {
  icône ?: react.reactnode;
  Enfants ?: String | React.reactNode;
  ClassName ?: String;
};

const iconwrapper = styled ('span') `
  Affichage: flex;
  marge-droite: 15px;
  hauteur: 16px;
  Align-Items: Centre;
`;

Après cela, nous pouvons enfin ajouter le nôtre en dessous de ces deux composants<listitem></listitem> Composants, bien qu'il soit beaucoup plus complexe. Nous devons ajouter des accessoires, puis lorsque icon existe, nous pouvons rendre ce qui précède<iconwrapper></iconwrapper> et rendre le composant icon qui y est passé. J'ai également ajouté tous les styles ci-dessous afin que vous puissiez voir comment je style chacune de ces variations:

 export const listItem = styled (({icon, className, enfants}: listItemprops) => (
  

{icon && ( {icône} )} {enfants}

)) ` Affichage: flex; Align-Items: Centre; Position: relative; padding-gauche: 34px; marge-fond: 20px; / * Positionnement du cercle et d'icône minuscule * / &:avant, > $ {Iconwrapper} { Position: absolue; à gauche: 0; } ul & { Couleur: #AAA; / * Cette pseudo est le petit cercle pour les articles UL * / &:avant { contenu: ''; Largeur: 6px; hauteur: 6px; Border-Radius: 50%; marge-droite: 15px; Border: 1px solide #AAA; Color en arrière-plan: transparent; Gauche: 5px; En haut: 10px; } / * Styles d'icônes * / $ {p => p.icon && ` portée { en haut: 4px; } / * Supprime le petit cercle pseudo si l'icône est présente * / &:avant { Contenu: aucun; } `} } / * Lorsque la liste est rendue comme un

* / ol & { &:avant { Counter-Increment: NumberEdList; Contenu: Counter (NumberEdList); En haut: 3px; Affichage: flex; Align-Items: Centre; Justification-contenu: centre; Texte-aligne: Centre; Largeur: 18px; hauteur: 18px; taille de police: 10px; Police-poids: 600; Border: 1px solide #AAA; Border-Radius: 50%; Color en arrière-plan: transparent; marge-droite: 20px; } } `;

C'est ça! Une construction relativement simple en utilisant l'émotion<list></list> Composants. Cependant, après avoir terminé cet exercice, je ne sais toujours pas si j'aime cette grammaire. Je pense que cela rend les choses simples très simples, mais les composants de taille moyenne sont beaucoup plus complexes qu'ils ne devraient l'être. De plus, cela peut être très déroutant pour les débutants, ce qui me rend un peu inquiet.

Mais je pense que tout apprend l'expérience. Quoi qu'il en soit, je suis heureux d'avoir l'occasion de faire face à ce petit composant, car il m'a appris des connaissances sur TypeScript, React et comment rendre nos styles lisibles dans une certaine mesure.

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!