logo

TechCodeview

Slog v vrstici v Reactu

Uvod

V čelnih projektih, ki redko zahtevajo enostransko aplikacijo, so vgrajeni slogi elementov DOM pogosto postavljeni v ciljni element >' atribut.

Toda v Reactu so stvari precej drugačne glede oblikovanja v vrstici. Ta priročnik se osredotoča na doseganje tega z uporabo resničnega primera ustvarjanja komponente kartice uporabniškega profila.

Komponente oblikovanja v Reactu

Morda ste že seznanjeni z običajnim načinom oblikovanja komponent React z uporabo atributa classname v povezavi z zunanjo tabelo slogov:

 import React from &apos;react&apos; import &apos;./style.css&apos; function myComponent(){ return( return <p classname="paragraph-text">ClassName Styled Text</p> ) }

jsx 

 paragraph-text{ font-weight: bold; color: beige; }

CSS

Slogi v vrstici

Pridobivanje enakega rezultata z vgrajenimi slogi deluje precej drugače. Če želite uporabiti vgrajene sloge v Reactu, uporabite atribut style, ki sprejme objekt JavaScript s kamelimi lastnostmi. primer:

 function MyComponent(){ return Inline Styled Component }

Upoštevajte, da vrednost oblazinjenja nima enote, ker React doda a 'px ' pripona nekaterih številskih lastnosti sloga v vrstici. V primerih, ko morate uporabiti druge enote, na primer 'em' ali 'rem', izrecno določite enoto z vrednostjo kot niz. Uporaba tega za lastnost oblazinjenja bi morala biti oblazinjenje: '1,5em' .

Poleg tega ti slogi nimajo samodejno predpone prodajalca, zato morate predpone prodajalca dodati ročno.

Izboljšajte berljivost

Berljivost MyComponent dramatično pade, če je stilov preveč in vse postane okorno. Kot je prikazano spodaj, ker so slogi le objekti, jih je mogoče odstraniti iz komponente.

 const myComponentStyle = { color: &apos;blue&apos;, lineHeight: 10, padding: &apos;1.5em&apos;, } function MyComponent(){ return Inline Styled Component }

jsx

Gradnja komponente kartice

Izdelajmo komponento uporabniške kartice.

 const cardStyles = { container: { display: &apos;flex&apos;, height: 100, width: 400, boxShadow: &apos;0 0 3px 2px #cec7c759&apos;, alignItems: &apos;center&apos;, padding: 20, borderRadius: 20, }, profilePicture: { display: &apos;flex&apos;, justifyContent: &apos;center&apos;, alignItems: &apos;center&apos;, backgroundColor: &apos;orange&apos;, color: &apos;white&apos;, height: 20, width: 20, borderRadius: &apos;50%&apos;, padding: 10, fontWeight: &apos;bold&apos;, }, bio: { marginLeft: 10, }, userName: { fontWeight: &apos;bold&apos;, }, }; function userCardComponent(){ <span style="{cardStyles.profilePicture}">D</span> <p style="{cardStyles.userName}">Desmond Nyamador</p> <p>I just learned an easy way to style React Components</p> }

Praktično pravilo

Uradna dokumentacija React laja proti uporabi vgrajenega sloga kot primarnega sredstva za oblikovanje projektov in namesto tega priporoča uporabo atributa className.

Opomba Nekateri primeri v dokumentaciji uporabljajo slog zaradi priročnosti, vendar na splošno ni priporočljivo uporabljati atributa style kot primarnega sredstva elementov sloga.

V večini primerov, ime razreda s se mora nanašati na razrede, definirane v zunanji tabeli slogov CSS. Slogi se pogosto uporabljajo v aplikacijah React za dodajanje dinamično izračunanih slogov v času upodabljanja.