Wie man eine Listenkomponente mit Emotionen erstellt

Während ich diese Woche Code Refactoring bei Sentry durchführte, stellte ich fest, dass uns eine gemeinsame Listenkomponente fehlte, die zwischen Projekten und Merkmalen üblich sein könnte. Also habe ich angefangen, eines zu kreieren, aber das Problem ist: Wir verwenden Emotionen für Stil in Sachen, und ich habe nur ein vorläufiges Verständnis von Emotionen, das in seiner Dokumentation als ...

… Eine Bibliothek zum Schreiben von CSS -Stilen mit JavaScript. Neben einer leistungsstarken, vorhersehbaren Stilkombination bietet sie ein hervorragendes Entwicklererlebnis mit Funktionen wie Quellzuordnung, Tagging und Testversorgungsunternehmen. String- und Objektstile werden unterstützt.

Wenn Sie noch nie von Emotionen gehört haben, lautet die Grundidee wie folgt: Wenn wir mit vielen Komponenten an einer großen Codebasis arbeiten, möchten wir sicherstellen, dass wir die Cascading -Stylesheets von CSS steuern können. Nehmen wir also an, Sie haben eine .active Klasse in einer Datei und möchten sicherstellen, dass sie sich nicht auf den Stil einer vollständig eigenständigen Komponente auswirkt, die auch über eine .active Klasse in einer anderen Datei verfügt.

Emotion löst dieses Problem, indem Sie Ihren Klassennamen benutzerdefinierte Zeichenfolgen hinzufügen, damit sie nicht mit anderen Komponenten in Konflikt stehen. Hier ist ein Beispiel für HTML, das es ausgeben kann:

<div></div>

Sehr prägnant, oder? Es gibt jedoch viele andere Tools und Workflows, die sehr ähnliche Funktionen wie CSS -Module implementieren können.

Um Komponenten zu erstellen, müssen wir zunächst Emotionen in unser Projekt einbauen. Ich werde nicht auf Details eingehen, da es von Ihrer Umgebung und Ihren Einstellungen abhängt. Sobald es jedoch erledigt ist, können wir eine neue Komponente wie diese erstellen:

 Import reagieren aus "reagieren";
Import gestylt von '@emotion/styled';

Export const list = styled ('ul') `
  Listenstil: Keine;
  Polsterung: 0;
`;

Das sieht für mich seltsam aus, weil wir es nicht nur tun<ul></ul> Das Element ist stilvoll geschrieben, und die Komponente sollte auch a rendern<ul></ul> Element. Das Kombination von Markern und Stilen gleichzeitig an einem Ort fühlt sich komisch an, aber ich mag die Einfachheit. Es stört nur mein Verstandsmodell und die Trennung von Bedenken zwischen HTML, CSS und JavaScript. In einer anderen Komponente können wir dies importieren<list></list> Und benutze es so:

 Liste aus 'Komponenten/Liste' importieren;

<list>Dies ist ein Listenelement.</list>

Die Stile .oefioaueg die wir zur Listenkomponente hinzufügen<ul></ul> im Element. Aber wir sind noch nicht fertig! Für das Listendesign muss ich in der Lage sein, mit derselben Komponente zu rendern<ul></ul> Und<ol&gt;</ol&gt; . Ich brauche auch eine Version, mit der ich Symbole in jedem Listenelement platzieren kann. So wie folgt: Das coole (und ein wenig seltsame) Ding an Emotionen ist, dass wir as -Attribut verwenden können, um das HTML -Element beim Importieren der Komponente auszuwählen. Wir können diese Eigenschaft nutzen, um unsere zu erstellen<ol&gt;</ol&gt; Varianten ohne Erstellen benutzerdefinierter Typattribute oder andere Inhalte. Und das sieht so aus:

<list> Dies wird eine UL vorstellen.</list>
<list as="ol&quot;>Dies wird einen OL präsentieren.</list>

Das ist nicht nur seltsam für mich, oder? Dies ist jedoch sehr clever, da wir in der Komponente selbst keine seltsame Logik machen müssen, um das Tag zu ändern.

Zu diesem Zeitpunkt bemerkte ich, wie die ideale API für diese Komponente aussehen könnte, denn dann können wir von dort aus zurückkehren. Das habe ich mir vorgestellt:

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

Nachdem ich diese Skizze gemacht habe, weiß ich, dass wir zwei Komponenten brauchen und dazu in der Lage sind<listitem></listitem> Die Fähigkeit, Icon -Unterkomponenten darin zu nisten. Wir können so anfangen:

 Import reagieren aus "reagieren";
Import gestylt von '@emotion/styled';

Export const list = styled ('ul') `
  Listenstil: Keine;
  Polsterung: 0;
  Randboden: 20px;

  ol & {
    Gegenauflistung: Numberlist;
  }
`;

Diese spezielle ol& Syntax ist das, was wir Emotionen sagen, dass diese Stile nur im Element als<ol&gt;</ol&gt; Nur anwendbare Methode. Es ist normalerweise am besten, background: red; Zu diesem Element, um sicherzustellen, dass Ihre Komponente den Inhalt korrekt macht. Als nächstes kommt unsere Unterkomponente<listitem></listitem> . Es ist zu beachten, dass wir in Sentry auch TypeScript verwenden, sodass wir unsere definieren<listitem></listitem> Vor der Komponente müssen wir zuerst unsere Requisiten festlegen:

 Geben Sie listItemProps = {{
  Icon ?: react.reactnode;
  Kinder ?: String | React.reactnode;
  Klassenname ?: String;
};

Jetzt können wir unsere hinzufügen<iconwrapper></iconwrapper> Komponente wird es sein<listitem></listitem> Einstellung<icon></icon> Die Größe der Komponente. Wenn Sie sich an das obige Beispiel erinnern, möchte ich, dass es so aussieht:

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

Die IconBusiness -Komponente ist eine bereits bestehende Komponente, in die wir einwickeln möchten<span></span> damit wir es stylen können. Zum Glück brauchen wir nur ein wenig CSS, um die Symbole richtig mit dem Text auszurichten, und<iconwrapper></iconwrapper> All dies kann für uns behandelt werden:

 Geben Sie listItemProps = {{
  Icon ?: react.reactnode;
  Kinder ?: String | React.reactnode;
  Klassenname ?: String;
};

const iconwrapper = styled ('span') `
  Anzeige: Flex;
  Rand-Rechts: 15px;
  Höhe: 16px;
  Ausrichtung: Zentrum;
`;

Danach können wir endlich unsere unter diese beiden Komponenten hinzufügen<listitem></listitem> Komponenten, obwohl es viel komplexer ist. Wir müssen Requisiten hinzufügen, und wenn icon -Requisite existiert, können wir die oben genannten Rendern rendern<iconwrapper></iconwrapper> und rendern Sie die icon -Komponente in sie. Ich habe auch alle Stile unten hinzugefügt, damit Sie sehen können, wie ich jede dieser Variationen style:

 export const listItItem = styled (({icon, className, childhes}: listItemProps) => (
  

{Icon && ( {Symbol} )} {Kinder}

)) ` Anzeige: Flex; Ausrichtung: Zentrum; Position: Relativ; Padding-Links: 34px; Randboden: 20px; / * Winziger Kreis und Symbolpositionierung */ &:vor, > $ {Iconwrapper} { Position: absolut; links: 0; } ul & { Farbe: #aaa; / * Dieser Pseudo ist der winzige Kreis für UL -Gegenstände */ &: vor { Inhalt: ''; Breite: 6px; Höhe: 6px; Grenzradius: 50%; Rand-Rechts: 15px; Grenze: 1PX Solid #aaa; Hintergrundfarbe: transparent; links: 5px; Top: 10px; } / * Symbolstile *// $ {p => P.icon && ` Span { Top: 4px; } / * Entfernt winzigen Kreis Pseudo, wenn die Symbol vorhanden ist */ &: vor { Inhalt: Keine; } `} } /* Wenn die Liste als als gerendert wird

*/ ol & { &: vor { Gegeninkrement: Numberlist; Inhalt: Zähler (numberlist); Top: 3px; Anzeige: Flex; Ausrichtung: Zentrum; Justify-Content: Center; Text-Align: Mitte; Breite: 18px; Höhe: 18px; Schriftgröße: 10px; Schriftgewicht: 600; Grenze: 1PX Solid #aaa; Grenzradius: 50%; Hintergrundfarbe: transparent; Rand-Rechts: 20px; } } `;

Das war's! Ein relativ einfacher Build mit Emotionen<list></list> Komponenten. Nach Abschluss dieser Übung bin ich mir jedoch immer noch nicht sicher, ob mir diese Grammatik gefällt. Ich denke, es macht einfache Dinge sehr einfach, aber mittelgroße Komponenten sind viel komplexer als sie sein sollten. Außerdem kann es für Neulinge sehr verwirrend sein, was mich ein wenig besorgt macht.

Aber ich denke, alles ist Lernerfahrung. Wie auch immer, ich bin froh, die Gelegenheit zu haben, mit dieser kleinen Komponente umzugehen, da es mir einige Kenntnisse über Typenkripte, Reaktionen und wie wir unsere Stile in gewissem Maße lesbar machen können.

Das obige ist der detaillierte Inhalt vonWie man eine Listenkomponente mit Emotionen erstellt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!