Sådan oprettes en statuslinje med reaktion

Denne tutorial er for alle, der er interesseret i, hvordan de vil gå videre med at opbygge en simpel fremdriftslinje i React. For at gøre dette pænt og let for alle, vil jeg bygge vores eksempel ud i Codepen, når vi skrider frem gennem tutorial. Et link til den afsluttede version inkluderes i slutningen.

Se mine andre artikler

Tjek venligst disse ud, hvis du er interesseret efter at have læst den aktuelle artikel!

Planlægning af komponenten

Før vi begynder at skrive kode, lader vi hurtigt arkivere, hvordan vores React Progress Bar skal se ud. For mig ser det ud som om vi kun virkelig har brug for to elementer til at udgøre vores fremskridt. Disse elementer er:

  • En overordnet div, der holder en anden div inde i det. Lad os navngive denne ProgressBar.
  • En div, der fungerer som fyldstoffet inde i den overordnede div. Denne div vil være stylet med farve og vil fylde en x procentdel af beholderen vandret og lodret. Lad os navngive denne Filler.

Stilladser ProgressBar

Okay, lad os komme til kodning. Lad os starte med at opbygge stilladsen på statuslinjen. I denne tutorial bruger jeg ProgressBar som en funktionel React Component. Der er masser af andre måder at gøre dette ved, men lad os bare gå med denne tilgang.

Dette er den overordnede div, jeg talte om i planlægningsafsnittet. Inde i det skal vi bare tilføje Filler-komponenten. Vi har ikke det bygget endnu, så lad os bygge det!

Store. Vi har vores to komponenter. Lad os sammensætte dem alle ved at tilføje fyldstoffet inde i ProgressBar.

Wow, dette er utroligt. Bortset fra, er der absolut ingen styling for nogen af ​​disse komponenter. Lad os hurtigt style disse op!

Stilarterne i progress-bar-klassen er ret lige frem. Det eneste, jeg gør, er at give det en indledende højde og bredde, en kant og nogle afrundede kanter ved hjælp af grænseradius. Det er vigtigt at bemærke min brug af position: i forhold til statuslinjen er det nødvendigt, da jeg tildeler en højde på 100% til fillerklassen.

For fyldstofformater er disse også lette at forstå. Jeg satte fyldstofens baggrund til en turkisblå farve (# 1DA598), og sørg for, at min fyldstofhøjde matcher dens overordnede ved at give den en højde på 100%. Jeg vil også have, at grænseradiusen matcher forælderen, så jeg indstiller den til at arve fra dens overordnede.

Du er måske nysgerrig efter overgangen, jeg tilføjede til fyldstof. Dette gør simpelthen fyldstofovergangen mere naturlig, når den øges / formindskes i størrelse. Lad os se hvad vi i øjeblikket har til statuslinjen:

En kedelig, tom statuslinje = (

Vi kan løse denne kedelige fremdriftslinje ved at tilføje nogle rekvisitter. Lad os gøre det!

Tilføjelse af de nødvendige rekvisitter til komponenten

Vi er nødt til at komme på en eller anden type system, der gør det muligt for vores fremdriftsbalkens fyldkomponent dynamisk at ændre bredden. Det er her vi er nødt til at begynde at integrere staten og rekvisitterer funktioner i React. For at gøre det, lad os bygge en anden komponent, der giver os mulighed for at teste og implementere disse funktioner.

Som du kan se, initialiserer jeg en egenskab i den tilstand, der kaldes procent, og tildeler den en startværdi på 0. Dette er den tilstandsvariabel, vi skal bruge til at kontrollere bredden af ​​vores fyldstof. For at gøre ProgressBar opmærksom på denne værdi passerer jeg den som en prop, der er knyttet til komponenten.

Der er dog et problem. Det er fantastisk, at vi overfører værdien som en rekvisitter, men ProgressBar-komponenten har stadig ingen idé om, hvordan man håndterer denne prop. For at løse dette kan vi blot gøre følgende:

Ved at oprette en prop, der er knyttet til Filler, kan vi føre værdien videre ned i Filler. Alt, hvad vi skal gøre nu, er at gøre noget med den værdi, vi modtager inden i Filler, og vi skal være færdige.

Indstilling af bredden på fyldstof

Den sidste ting, vi skal gøre, er at tage den værdi, vi modtager som en rekvisita i Filler, og indstille denne værdi til at være bredden af ​​Filler. Dette kan let implementeres via inline-styling. Lad os se, hvordan det er gjort.

Dynamisk indstilling af Filler-bredden baseret på dens propværdi

Det er det! Blot for spark, kan vi ændre den oprindelige tilstandsejendom for ProgressBarExample til 60:

Se nu på vores smukke fremdriftslinje i aktion!

Indpakning af ting

Nu ved jeg, at dette bare var et meget simpelt eksempel, men jeg har inkluderet en mere dybdegående version, som du kan rod med med på Codepen. Det er fuldt interaktivt, og forhåbentlig lærer det dig noget nyt. Hvis du kunne lide denne selvstudie, ville jeg elske, at du gav mig en opfølgning på GitHub!

https://github.com/dzuz14

Links

Lær React gratis på YouTube

Når du har læst denne artikel, ville jeg meget gerne have dig til at tjekke min gratis YouTube-tutorial om React, hvor jeg viser dig, hvordan du opretter et miniaturegalleri fra bunden. Giv det gerne et bogmærke, før du begynder at læse! =)

Eksempel på fuld fremskridtslinje på Codepen

DanZuzevich.com