So erstellen Sie ein Sternbewertungs-Widget in React.js und optimieren es / Sudo Null IT News

In diesem Artikel möchte ich auf eine weitere Aufgabe eingehen, der Sie möglicherweise in einem Front-End-Interview gegenüberstehen – das Erstellen eines Sternbewertungs-Widgets.

In den letzten fünf Monaten hatte ich 15 Vorstellungsgespräche vor Ort sowie Angebote von Google, Roku, Microsoft und mehr.

Sie sollten die Anforderungen verfeinern und dieses Widget innerhalb von ca. 45-50 Minuten implementieren.

Anforderungen

Beginnen wir mit den Anforderungen an unser Widget.

  • Anzeige der angegebenen Anzahl Sterne aus der config.

  • Benutzer können eine Bewertung auswählen.

  • Unterstützung für den schreibgeschützten Modus, um die Bewertungen anderer Benutzer ohne Bearbeitung anzuzeigen.

  • Widget-Textanpassung.

  • Farbanpassung für ausgewählte und nicht ausgewählte Zustände.

  • Erweitern Sie die Bewertungsauswahl und Hover-Ereignisse.

  • Anpassung der Sterngröße.

Layout

Komponentenarchitektur

Komponentencode

Beginnen wir mit den Requisiten unserer Komponente. Mit diesen Abstandshaltern können wir unseren Slider konfigurieren.

In der Sternebewertungskomponente müssen wir Folgendes implementieren:

  • Erweiterung der Methoden zum Auswählen und Bewegen der Maus über eine Bewertung zur Anpassung durch den Benutzer.

  • Werfen Sie die gesamte Widget-Konfiguration in den Kontext.

  • Rendern der Label- und StarsList-Komponenten.

Die aktuellen Rating- und Hover-Werte werden im lokalen Zustand der Komponente gespeichert. Um zu vermeiden, dass viele Requisiten gespoolt werden, schlage ich vor, Kontext zu verwenden, um die Konfiguration und den aktuellen Status des Widgets zu swipen.

setRatingFn und setHoverFn erweitern Ereignisse um benutzerdefinierte Funktionen und liefern die aktuellen Zustände des Widgets. Im schreibgeschützten Modus sind diese Methoden deaktiviert.

Für den Widget-Text haben wir eine Standardmethode mit Standardtext. Wenn der Benutzer einen anderen Text verwenden möchte, lassen wir ihn diese Methode überschreiben. Diese Methode wird in der StarRatingLabel-Komponente beim Rendern verwendet.

Die StarsList-Komponente zeigt die in der Konfiguration angegebene Anzahl von Sternen an. Der Standardwert ist fünf.

Jede Star-Komponente kennt ihren eigenen Wert, und wir können diesen Wert verwenden, um den Bewertungsstatus zu speichern oder Änderungen beim Hover anzuzeigen. Mit SVG können Sie die Farbe, Größe und Form der Symbole steuern. Wenn Sie die Möglichkeit bieten möchten, andere Symbole zu verwenden, kann der Benutzer sein eigenes SVG in der Konfiguration festlegen. Mit SVG können Sie auch die Größe ändern, ohne die Bildqualität zu verlieren.

Ein anderer Ansatz könnte darin bestehen, benutzerdefinierte Schriftarten zu verwenden, wenn Sie verschiedene Symbole für das Widget bereitstellen.

Optimierung

Wie Sie in der Star-Komponente sehen können, wird jedes Mal eine anonyme Funktion erstellt, wir können dies vermeiden.

Lassen Sie uns den Code für die Star-Komponente ändern. Sie müssen ein Datenattribut mit einem Wert für den Stern hinzufügen und die Methoden onClick, onMouseEnter und onMouseLeave ohne anonyme Funktionen aufrufen.

In der Star Rating-Komponente wurden zwei Methoden geändert: setRatingFn und setHoverFn. Hier können wir den Wert aus dem Datenattribut erhalten und verwenden.

Beim onMouseLeave-Ereignis müssen wir den Hover-Status auf null setzen. Wir können dies herausfinden, indem wir eine Prüfung für den Typ des Ereignisses hinzufügen oder indem wir eine separate Methode erstellen und diese aufrufen.

Ein anderer Ansatz könnte darin bestehen, ein Optionsfeld zu verwenden und daraus den aktuellen Wert abzurufen.

Fazit

Jetzt wissen Sie, wie Sie Ihr eigenes Sternebewertungs-Widget erstellen und welche Anforderungen Sie mit dem Interviewer überprüfen können.

Den gesamten Code finden Sie unter GitHub.

Andere Artikel, die Sie lesen können:

Weitere Informationen zum US-Stellensuchprozess für eine Front-End-Stelle finden Sie unter my Telegrammkanal.

Viel Glück bei Ihren Vorstellungsgesprächen!

Similar Posts

Leave a Reply

Your email address will not be published.