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>
2. Jaunās rindas blakus tagiem tiek noņemtas:
<div>


  Nosaukums
</div>
3. JSX apvieno jaunas rindas, kas notiek virkņu literāļu vidū, vienā telpā:

<div>
Mans
Nosaukums
</div>

Tas nozīmē, ka visi iepriekš minētie gadījumi atveido vienu un to pašu.

JSX elementi

Jūs varat nodrošināt JSX elementus kā bērnus, lai parādītu ligzdotos komponentus:
<Ziņojums>
  <Virsraksts />
  <Saturs />
</Ziņojums>
JSX ļauj arī sajaukt un saskaņot dažādu veidu bērnus, piemēram, virkņu literāļu un JSX elementu kombināciju:
<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>
  );
}
Varat arī sajaukt JavaScript izteiksmes ar cita veida bērniem, neizmantojot virkņu veidnes, kā tas ir tālāk esošajā piemērā:
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

Jūs esat uzzinājis par dažādiem JSX bērnu veidiem, piemēram, kā atveidot virkņu literāļus kā bērnus, kā JSX elementus un JavaScript izteiksmes var izmantot kā bērnus, kā arī par Būlean, nulles vai nedefinētām vērtībām, kas tiek ignorētas kā bērni un principā neatveido neko.

Loading

Noderīgs raksts? Dalies ar citiem:
Dalīties: