Bevezetés
A karakterláncokkal végzett munka során előfordulhatnak olyan helyzetek, amelyek megkövetelik, hogy dinamikusan adjunk hozzá egy adott értéket az ilyen karakterlánchoz, hogy az továbbra is egy karakterláncot adjon vissza, ezt a műveletet karakterlánc-interpolációnak nevezik.
Ez a dinamikus érték lehet egy változó, állapot vagy bármi más, amely a karakterláncba beágyazandó tényleges értéket tartalmazza.
Ebben az útmutatóban megvizsgáljuk, hogyan valósíthatjuk meg a karakterlánc-interpolációt a React-ban, figyelembe véve azokat a különféle eseteket, amelyeknél karakterlánc-interpolációra lehet szükség, és hogyan érhető el.
Karakterlánc-interpoláció ES5-ben és ES6-ban
A karakterlánc-interpoláció kétféleképpen valósítható meg: összefűzés és sablonliterálok. Bár egyesek azt állítják, hogy az összefűzés nem karakterlánc-interpoláció, a karakterlánc-interpoláció arra a képességre utal, hogy helyőrző-helyettesítéssel karakterláncokat hozhatunk létre, amit az összefűzés egyértelműen meg is tesz.
A sablonliterálok ES6-ban történő bevezetése előtt mindig is használtuk az összefűzést, ami nagyon nehézzé válik olyan többsoros karakterláncok kezelésekor, amelyek sok változó helyettesítését igénylik. Amikor a sablonliterálokat bevezették az ES6-ban, sokkal könnyebbnek bizonyult a megvalósításuk, különösen a hosszabb vagy többsoros karakterláncok esetében, amelyekbe kifejezéseket szeretnénk beágyazni.
Ebben az útmutatóban mindkét módszert megvizsgáljuk, majd példákat mutatunk be sablonliterálokkal, ami az ajánlott megközelítés.
Karakterlánc-interpoláció a React With Concatenation
Az összefűzés szokásos módszere a +
operátor az adott változó vagy állapot körül:
const App = () => { const [fontSize] = useState('large'); return ( <div className="container"> <h1 className={"font-bold text-" + fontSize}>Hello World</h1> </div> );
};
A fenti kódban a következő állapottal rendelkezünk fontSize
amelynek értéke van large
. Azt akarjuk, hogy az osztály dinamikusan legyen lekérve – például lehet text-small
, text-large
, text-medium
stb. Államtól függően eltérő className
így a címsorra lesz alkalmazva!
Az összefűzéssel először elhelyezzük a tényleges karakterláncot, majd használjuk a+
operátort, hogy a változót a tényleges karakterlánccal interpolálja, így visszaadhatja az interpolált értéket:
A fenti metódus bonyolulttá válik, ha kettő vagy több változó vagyunk, és különösen akkor, ha a karakterláncokat egy másik karakterláncon belül adjuk hozzá, és nem a végéhez.
Karakterlánc-interpoláció a sablonliterálokkal való reagáláshoz
Ez a legjobb módszer a karakterlánc-interpoláció kezelésére. Az ES6-ban adták hozzá, és azóta a karakterlánc-interpoláció leggyakrabban használt módszere lett. Karakterláncsablon literálokat használva ismételjük meg az előző példát:
const App = () => { const [fontSize] = useState('large'); return ( <div className="container"> <h1 className={`font-bold text-${fontSize}`}>Hello World</h1> </div> );
};
Ahogy a fenti kódban láthatjuk, a sablonliterálokban már nem használjuk a plusz operátort, helyette a teljes karakterlánchoz backtick-et használunk, majd a dollárjelet és a kapcsos zárójelet használjuk a változóink és dinamikus értékeink beszúrásához.
Az állítást értékeljük és const fontSize
be van illesztve a karakterláncba.
Nézzünk még néhány példát a React karakterlánc interpolációjára!
Hogyan használjuk a karakterlánc-interpolációt stílusértékek átadására a React-ban
Abban a helyzetben, amikor a stílusadataink egy olyan változóban vannak tárolva, amelyet a szöveg belső stílusához szeretnénk használni a Reactban, használhatunk sablonliterálokat:
const App = () => { const textSize = 40; return ( <div className="container"> <h1 style={{ fontSize: `${textSize}px` }}>Hello World</h1> </div> );
};
Ahogy korábban mondtuk, a dollárjel és a göndör kapcsos zárójelek a helyőrzőnk rögzítésére szolgálnak, és ez visszaadja a stílust a megfelelő módon:
A kiértékelést a göndör kapcsos zárójelben is elvégezhetjük, tegyük fel, hogy a számot meg kell szorozni:
<h1 style={{ fontSize: `${textSize * 2}px` }}>Hello World</h1>
Hogyan használjuk a karakterlánc-interpolációt a React kifejezésekkel
Eddig azt láttuk, hogy tudunk értékeléseket végezni; azt is fontos megjegyezni, hogy a kapcsos kapcsos zárójelekbe kifejezéseket adhatunk, hogy a kifejezés alapján megkapjuk a megfelelő értéket, és ezt használjuk:
const App = () => { const [showNav, setShowNav] = useState(true); return ( <div className="container"> <div className={`navbar ${showNav ? 'mobile-nav' : ''}`}>NavBar</div> </div> );
};
Többsoros karakterlánc interpolálása sablonliterálokkal
Ahogy korábban említettük, a sablonliterálok megkönnyítik a helyőrzők hozzáadását többsoros karakterláncokhoz:
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> );
};
A fenti kódban láthatjuk, milyen egyszerű a sablonliterálok használata az összefűzéshez képest:
let sentence = "The fact that " + user.name+ " is " +user.age+ " years old and his hobby is " +user.hobby+ " amazes me.";
Hogyan használjuk ki a logikai operátorokat a sablon betűjelekkel
Eddig láttuk, hogyan adjunk át kifejezéseket hármas operátorokkal, de az is a legjobb, ha látjuk, hogy a logikai operátorok is dolgozhatnak sablonliterálokkal:
const App = () => { const [showNav, setShowNav] = useState(true); return ( <div className="container"> <div className={`navbar ${showNav && 'mobile-nav'}`}>NavBar</div> </div> );
};
Következtetés
Ebből a cikkből megtanultuk, hogyan lehet végrehajtani a karakterlánc-interpolációt két szabványos módszerrel, valamint azt, hogy milyen erősek lehetnek a sablonliterálok. A sablonliterálok bevezetése óta a legtöbben a használat egyszerűsége és a lényegesen jobb kódolvashatóság miatt szívesebben használják őket.
- '
- &
- a
- képesség
- Fiók
- elért
- törvény
- hozzáadott
- Bár
- mindig
- Másik
- app
- alkalmazott
- megközelítés
- körül
- cikkben
- válik
- BEST
- Jobb
- osztály
- kód
- képest
- bonyolult
- Konténer
- tartalmaz
- tudott
- teremt
- dátum
- foglalkozó
- attól
- különböző
- nehéz
- Dollár
- dinamikus
- beágyazott
- különösen
- stb.
- értékelés
- példa
- példák
- kifejezések
- vezetéknév
- útmutató
- tart
- Hogyan
- How To
- HTTPS
- végre
- fontos
- példa
- IT
- nagy
- tanult
- vonal
- vonalak
- néz
- csinál
- Gyártás
- mód
- több
- a legtöbb
- többszörös
- szorozva
- szám
- operátor
- üzemeltetők
- különös
- Emberek (People)
- erős
- Reagál
- kifejezés
- ismétlés
- szükség
- visszatérés
- Visszatér
- Mondott
- <p></p>
- óta
- helyzet
- So
- néhány
- különleges
- standard
- Állami
- nyilatkozat
- Még mindig
- stílus
- bevétel
- A
- us
- használ
- érték
- különféle
- módon
- belül
- Munka
- dolgozó
- XML
- év