Introduktion
Når man arbejder med strenge, kan der opstå situationer, der kræver, at vi dynamisk tilføjer en specifik værdi ind i en sådan streng, så den stadig returnerer en streng, handlingen med at gøre dette omtales som strenginterpolation.
Denne dynamiske værdi kan være en variabel, tilstand eller noget andet, der indeholder den faktiske værdi, der skal indlejres i strengen.
I denne guide vil vi se på, hvordan man implementerer strenginterpolation i React, under hensyntagen til de forskellige tilfælde, der kan kræve strenginterpolation, og hvordan de kan opnås.
Strenginterpolation i ES5 og ES6
Strenginterpolation kan udføres på to måder: sammenkædning og skabelonliteral. Selvom nogle hævder, at sammenkædning ikke er strenginterpolation, refererer strenginterpolation til evnen til at skabe strenge ved at lave pladsholdersubstitution, hvilket sammenkædning tydeligvis gør.
Før introduktionen af skabelonliteraler i ES6 havde vi altid brugt sammenkædning, hvilket bliver meget vanskeligt, når vi har at gøre med flerlinjede strenge, der kræver substitution af mange variable. Da skabelonliteraler blev introduceret i ES6, viste de sig langt nemmere at implementere, især for længere eller multi-line strenge, som vi ønsker at indlejre udtryk i.
I denne guide vil vi se på begge metoder og derefter udføre nogle eksempler med skabelonliterals, hvilket er den anbefalede tilgang.
Strenginterpolation i reaktion med sammenkædning
Standardmetoden til sammenkædning er ved at gøre brug af +
operator omkring den bestemte variabel eller tilstand:
const App = () => { const [fontSize] = useState('large'); return ( <div className="container"> <h1 className={"font-bold text-" + fontSize}>Hello World</h1> </div> );
};
I koden ovenfor har vi tilstanden fontSize
som har en værdi på large
. Vi ønsker, at klassen skal hentes dynamisk – det kunne det f.eks text-small
, text-large
, text-medium
osv. Afhængigt af staten, en anden className
vil således blive anvendt på overskriften!
Med sammenkædning vil vi først placere vores egentlige streng og derefter gøre brug af+
operator til at interpolere variablen med den faktiske streng, så den kunne returnere den interpolerede værdi:
Ovenstående metode bliver kompleks, når vi er to eller flere variable, og især hvis strengene tilføjes i en anden streng og ikke til slutningen.
Strenginterpolation for at reagere med skabelonbogstaver
Dette er den bedste metode til at håndtere strenginterpolation. Den blev tilføjet i ES6 og er siden blevet den mest brugte metode til strenginterpolation. Lad os gentage det foregående eksempel ved at bruge bogstavskabeloner:
const App = () => { const [fontSize] = useState('large'); return ( <div className="container"> <h1 className={`font-bold text-${fontSize}`}>Hello World</h1> </div> );
};
Som vi kan se i koden ovenfor, bruger vi ikke længere plus-operatoren i skabelonliteraler, i stedet bruger vi backticks for hele strengen og bruger derefter dollartegnet og krøllede klammeparenteser til at indsætte vores variabler og dynamiske værdier.
Redegørelsen vurderes og const fontSize
er indsat i strengen.
Lad os se på nogle flere eksempler på React-strenginterpolation!
Sådan gør du brug af strenginterpolation til at videregive stilværdier i React
I en situation, hvor vi har vores stildata gemt i en variabel, som vi ønsker at bruge til at style en tekst internt i React, kan vi bruge skabelonliterals:
const App = () => { const textSize = 40; return ( <div className="container"> <h1 style={{ fontSize: `${textSize}px` }}>Hello World</h1> </div> );
};
Som vi tidligere sagde, bruges dollartegnet og krøllede seler til at holde vores pladsholder, og dette vil returnere stilen på den rigtige måde:
Vi kunne også udføre evaluering inden for de krøllede seler, antag at vi ønsker, at tallet skal ganges:
<h1 style={{ fontSize: `${textSize * 2}px` }}>Hello World</h1>
Sådan gør du brug af strenginterpolation med udtryk i React
Indtil videre har vi set, at vi kan udføre evalueringer; det er også vigtigt at bemærke, at vi kan tilføje udtryk i de krøllede bøjler for at få den korrekte værdi baseret på udtrykket og bruge det:
const App = () => { const [showNav, setShowNav] = useState(true); return ( <div className="container"> <div className={`navbar ${showNav ? 'mobile-nav' : ''}`}>NavBar</div> </div> );
};
Sådan interpoleres streng med flere linjer med bogstaver i skabeloner
Som vi sagde tidligere, gør skabelonens bogstaver det nemt at tilføje pladsholdere til strenge med flere linjer:
const App = () => { let user = { name: 'John Doe', age: 14, hobby: 'basket ball', }; let sentence = `The fact that ${user.name} is ${user.age} years old and his hobby is ${user.hobby} amazes me.`; return ( <div className="container"> <div> <p>{sentence}</p> </div> </div> );
};
I koden ovenfor ser vi, hvor nemt det er at bruge skabelonliterals sammenlignet med at bruge sammenkædning:
let sentence = "The fact that " + user.name+ " is " +user.age+ " years old and his hobby is " +user.hobby+ " amazes me.";
Sådan gør du brug af logiske operatører med skabelonbogstaver
Indtil videre har vi set, hvordan man videregiver udtryk med ternære operatorer, det er også bedst at se, at logiske operatorer også kan arbejde med skabelonliteraler:
const App = () => { const [showNav, setShowNav] = useState(true); return ( <div className="container"> <div className={`navbar ${showNav && 'mobile-nav'}`}>NavBar</div> </div> );
};
Konklusion
Vi lærte, hvordan man implementerer strenginterpolation ved hjælp af to standardmetoder i denne artikel, samt hvor kraftfulde skabelonliteraler kan være. Siden introduktionen af skabelonliteraler foretrækker de fleste at bruge dem på grund af enkelheden i brug og væsentligt bedre kodelæsbarhed.
- '
- &
- a
- evne
- Konto
- opnået
- Lov
- tilføjet
- Skønt
- altid
- En anden
- app
- anvendt
- tilgang
- omkring
- artikel
- bliver
- BEDSTE
- Bedre
- klasse
- kode
- sammenlignet
- komplekse
- Container
- indeholder
- kunne
- skabe
- data
- beskæftiger
- Afhængigt
- forskellige
- svært
- Dollar
- dynamisk
- indlejret
- især
- etc.
- evaluering
- eksempel
- eksempler
- udtryk
- Fornavn
- vejlede
- hold
- Hvordan
- How To
- HTTPS
- gennemføre
- vigtigt
- instans
- IT
- stor
- lærte
- Line (linje)
- linjer
- Se
- lave
- Making
- metoder
- mere
- mest
- flere
- ganget
- nummer
- operatør
- Operatører
- særlig
- Mennesker
- vigtigste
- Reagerer
- refererer
- gentag
- kræver
- afkast
- afkast
- Said
- underskrive
- siden
- Situationen
- So
- nogle
- specifikke
- standard
- Tilstand
- Statement
- Stadig
- stil
- tager
- us
- brug
- værdi
- forskellige
- måder
- inden for
- Arbejde
- arbejder
- XML
- år