React: Bērnu tipi
JSX izteiksmēs saturs starp sākuma un aizvēršanas tagu tiek nodots kā unikāls rekvizīts, ko sauc par bērniem. Ir vairāki veidi, kā nodot bērnus, piemēram, atveidot virknes literāļus vai izmantojot JSX elementus un JavaScript izteiksmes. Ir arī svarīgi saprast JavaScript vērtību veidus, kas tiek ignorēti kā bērni un neko neatveido. Izpētīsim tos nedaudz sīkāk:
“Strings” virkņu literāļi
Virkņu literāļi attiecas uz vienkāršām JavaScript virknēm. Tos var ievietot starp atvēršanas un aizvēršanas tagiem, un šī “aukla”, jeb virkne “string” būs bērnu balsts.
<MansKomponents> Nosaukums </ MansKomponents>
Iepriekš minētajā piemērā MansKomponents
bērnu rekvizīti būs vienkārši virkne “Nosaukums
”.
Ir arī daži noteikumi, ko JSX ievēro attiecībā uz atstarpēm un tukšām rindām, kas jums jāpatur prātā, lai jūs saprastu, ko sagaidīt ekrānā, kad rodas šie malu gadījumi.
1. JSX noņem atstarpes rindas sākumā un beigās, kā arī tukšās rindas:
<div> Nosaukums </div>
<div>
Nosaukums
</div>
<div>
Nosaukums
</div>
<div>
Mans
Nosaukums
</div>
Tas nozīmē, ka visi iepriekš minētie gadījumi atveido vienu un to pašu.
JSX elementi
<Ziņojums>
<Virsraksts />
<Saturs />
</Ziņojums>
<Ziņa>
<div>Vai esi drošs?</div>
<Saturs />
</Ziņa>
React komponents var arī atgriezt virkni elementu, neiesaiņojot tos papildu tagā. Šim nolūkam varat izmantot React Fragments, izmantojot precīzo komponentu, kas importēts no React, vai tukšus tagus, kas ir īsāka fragmenta sintakse. Komponents React Fragment ļauj grupēt bērnu sarakstu, nepievienojot DOM papildu mezglus. Šajā nodarbībā varat uzzināt vairāk par fragmentiem papildu resursu vienībā.
Divi tālāk minētie koda piemēri ir līdzvērtīgi, un tas ir atkarīgs no jūsu personīgās izvēles, ko izvēlēties atkarībā no tā, vai vēlaties precīzāk vai īsāku sintakse:
return (
<React.Fragment>
<li>Pizza margarita</li>
<li>Pizza diavola</li>
</React.Fragment>
);
return (
<>
<li>Pizza margarita</li>
<li>Pizza diavola</li>
</>
);
JavaScript izteiksmes
Jūs varat nodot jebkuru JavaScript izteiksmi kā bērnu, iekļaujot to figūriekavās {}. Tālāk norādītās izteiksmes ir identiskas:
<MansKomponents> Nosaukums </ MansKomponents>
<MansKomponents>{'Nosaukums'}</ MansKomponents>
Šis piemērs ir tikai ilustrācijas nolūkos. Strādājot ar string bērnu literāļiem, priekšroka tiek dota pirmajai izteiksmei.
JavaScript izteiksmes var būt noderīgas, renderējot patvaļīga garuma JSX elementu sarakstu:
function Deserts(props) {
return <li>{props.title}</li>;
}
function Saraksts() {
const deserts = ['tiramisu', 'saldējums', 'kūka'];
return (
<ul>
{deserts.map((desert) => (
<Deserts key={desert} title={desert} />
))}
</ul>
);
}
function Labdien(props) {
return <div>Labdien {props.name}!</div>;
}
Funkcijas
Pieņemsim, ka JSX iekšpusē ievietojat JavaScript izteiksmi. Tādā gadījumā React novērtēs to kā virkni, React elementu vai abu kombināciju. Tomēr bērnu balsts darbojas tāpat kā jebkurš cits rekvizīts, kas nozīmē, ka to var izmantot jebkura veida datu, piemēram, funkciju, nodošanai.
Funkcija ir React bērna modelis, ko izmanto, lai abstrakti koplietotu funkcionalitātes, ko sīkāk redzēsiet kādā no nākošajiem rakstiem.
Būlean vērtības, Null un Undefined, tiek ignorētas
false, null, undefinied un true ir derīgi bērni. Viņi vienkārši neko nedod. Visas tālāk minētās izteiksmes atveidos vienu un to pašu:
<div />
<div></div>
<div>{false}</div>
<div>{null}</div>
<div>{undefined}</div>
<div>{true}</div>
Atkal, tas viss ir demonstrācijas nolūkos, lai jūs zinātu, ko sagaidīt ekrānā, kad jūsu JSX tiek izmantotas šīs īpašās vērtības.
Ja tos izmanto atsevišķi, tie nepiedāvā nekādu vērtību. Tomēr Būlean vērtības, piemēram, true un false, var būt noderīgas, lai nosacīti renderētu React elementus, piemēram, modāla komponenta renderēšanai tikai tad, ja mainīgais showModalir patiess.
<div>
{showModal && <Modal />}
</div>
Tomēr ņemiet vērā, ka React joprojām atveido dažas “nepatiesas” vērtības, piemēram, skaitli 0. Piemēram, tālāk norādītais kods nedarbosies tā, kā jūs varētu gaidīt, jo tiks izdrukāts 0, kad props.deserts ir tukšs masīvs:
<div>
{props.deserts.length &&
<DesertList deserts={props.deserts} />
}
</div>
Lai to labotu, jums ir jāpārliecinās, vai izteiksme pirms && vienmēr ir Būlean vērtība:
<div>
{props.deserts.length > 0 &&
<DesertList deserts={props.deserts} />
}
</div>
<div>
{!!props.deserts.length &&
<DesertList deserts={props.deserts} />
}
</div>
Secinājums
Atbildēt
Lai komentētu, jums jāpiesakās sistēmā.