React: komponentu kombinēšana ar bērniem – bērnu tipi

Izstrādājot React komponentus, viena no svarīgākajām īpašībām, ko izstrādātāji mēdz aizmirst, ir bērnu rekvizīts “children prop”. Bērnu rekvizīts, kas ir īpašs īpašums, kas piemīt visām sastāvdaļām, ir React jaudīgās kompozīcijas modeļa pamats. Pieņemsim, ka restorāns vēlas ļaut lietotājiem savā lietotnē izveidot kontus. Tas nozīmētu, ka ir jāizstrādā procesi, lai lietotnē izveidotu, pārvaldītu un iespēju arī dzēst izveidotos kontus. Šāda veida procesus var vienkārši un efektīvi konstruēt, izmantojot komponentu sastāvu ar bērniem.

Šajā rakstā jūs uzzināsiet,

• kāpēc komponentu sastāvs ir tik svarīgs un
• kā efektīvi izmantot un novērtēt bērnu rekvizītus.

Jūs arī uzzināsiet par divām galvenajām kompozīcijas iezīmēm un izpētīsiet dažus praktiskus piemērus, kas palīdzēs saprast, kā to izmantot, lai jūsu komponenti būtu izturīgāki un atkārtoti lietojami.

Ir divas galvenās funkcijas, kas nodrošina komponentu sastāvu;

• ierobežošana – Containment
• specializācija – Specialization

Sadalīsim šīs divas galvenās iezīmes, sākot ar ierobežošanu.

Ierobežojums attiecas uz faktu, ka daži komponenti nepazīst savus bērnus pirms laika. Īpaši bieži tas attiecas uz tādiem komponentiem kā sānjosla (sidebar) vai dialoglodziņš (dialog), kur tie norobežo noteiktu lietotāja interfeisa apgabalu, lai saturētu citus elementus.

Jūs varat tos uzskatīt arī par vispārīgām kastēm. Ja nezināt, dialoglodziņš ir modāla loga veids, kurā pārējā lietotāja saskarne ir atspējota, līdz modāls tiek uzrunāts un ar to mijiedarbojas. Šīm komponentu kastēm ieteicamā pieeja ir izmantot bērnu rekvizītus, lai bērnu elementus nodotu tieši kā to saturu. Izpētīsim to ar dialoga piemēru.

import React from "react";


function Dialogs(props) {
  return (
    <div className="modal">
      {props.children}
    </div>
  );
}


function ApstiprinājumaDialogs() {
  return (
    <Dialogs color="blue">
      <h1 className="Dialoga-virsraksts">
        Paldies!
      </h1>
      <p className="Dialoga-ziņojums">
        Mēs pabeigsim Jūsu pasūtījumu ātrāk kā 24 stundās
      </p>
    </Dialogs>
  );
}


export default ApstiprinājumaDialogs;

Šeit jums ir dialoga komponents, kas darbojas kā lodziņš, rūpējoties par konteinera stilu, lai tas izskatītos kā modāls logs. Izmantojot bērnu balstu, tas ir kļuvis par vispārēju komponentu, kuram mēs varam nodrošināt jebkuru derīgu JSX kā bērnus. Lai to ilustrētu, ir definēts apstiprinājuma dialoga komponents, kas izmanto dialoga komponentu un atveido virsrakstu un aprakstu kā bērnus. Šis piemērs parāda arī otru komponentu sastāva iezīmi, specializāciju.

Specializācija definē komponentus kā īpašus citu komponentu gadījumus. Šajā piemērā apstiprinājuma dialoglodziņš ir īpašs dialoga gadījums. Tagad, kad esat iepazinies ar komponentu sastāva pamatiem, ejiet uz priekšu un kodēsim lietojumprogrammu, lai parādītu, ko esat iemācījies.

Šī lietojumprogramma ir izveidota, izmantojot komandu terminālī npx create-react-app.

Iedomāsimies, ka restorāns vēlas piedāvāt lietotājiem vienkāršu veidu, kā dzēst savu kontu, ja viņi to vēlas. Mērķis ir izveidot vispārīgu dialoga komponentu, kas saturētu nosaukumu, aprakstu un brīdinājuma pogu, lai pārliecinātos, ka lietotāji ir informēti par visām darbības sekām, izmantojot komponentu sastāvu. Esmu jau izveidojis divus vispārīgus komponentus — pogu un brīdinājumu.

import "./App.css";


const Poga = ({ children, backgroundColor }) => {
  return <button style={{ backgroundColor}}>{children}</button>;
};


const Uzmanību = ({ children }) => {
  return (
    <>
    <div className="Pārklājums"/>
    <div className="Brīdinājums">{children}</div>
    </>
  );
};


function App() {
  return (
    <div className="App">
      <header>Restorāns</header>
      </div>
  );
}


export default App;

Pogai tiek izmantots bērnu atbalsts, lai norādītu savu tekstu, un brīdinājums ir vispārīgs lodziņš, kas fonā atveido pārklājumu un ekrāna centrā baltu modālu. Bērnu rekvizīti nosaka šī modāla saturu. Pirmais solis ir izveidot brīdinājuma pogu, izmantojot komponentu sastāva specializācijas funkciju. Šim nolūkam es definēšu jaunu komponentu ar nosaukumu dzēšanas poga, kurā es atveidošu pogas komponentu un konfigurēšu tā rekvizītus, lai tiem būtu sarkana krāsa un teksts būtu “dzēst”.

const DzēšanasPoga = () => {
  return <Button backgroundColor="red">Dzēst</Button>
}

Tad es iešu uz priekšu un renderēšu brīdinājuma komponentu. Pašreizējā stāvoklī tā ir tikai vispārīga balta kaste vai konteiners. Tas ilustrē otro komponentu sastāva iezīmi, kas ir ierobežošana. Es varu pielāgot kastes saturu jebkurā veidā, ko vēlos, vienkārši nodrošinot JSX kā tās bērnus. Lai izpildītu prasības, es izveidošu galveni ar nosaukumu Dzēst kontu, kā arī rindkopu, lai informētu lietotāju par darbību. Es vēlos skaidri pateikt, ka viņi izdzēsīs savu kontu, tāpēc es to atspoguļošu aprakstā. Visbeidzot, pēdējais uzdevums ir atveidot dzēšanas pogu, kā noteikts iepriekš. Tas to noslēdz.

import "./App.css";


const Poga = ({ children, backgroundColor }) => {
  return <button style={{ backgroundColor}}>{children}</button>;
};


const Brīdinājums = ({ children }) => {
  return (
    <>
    <div className="Pārklājums"/>
    <div className="Brīdinājums">{children}</div>
    </>
  );
};


const DzēšanasPoga = () => {
  return <Poga backgroundColor="red">Dzēst</Poga>
}


function App() {
  return (
    <div className="App">
      <header>Virsraksts atrodās šeit</header>


<Brīdinājums>
<h4>Dzēst Profilu kas.id.lv?</h4>
<p>Vai esat drošs, ka vēlaties dzēst profilu?</p>
<DzēšanasPoga/>
</Brīdinājums>


      </div>
  );
}


export default App;

Šajā rakstā jūs uzzinājāt par React tehniku, ko sauc par komponentu sastāvu, un to, kāpēc tā ir tik svarīga. Jūs arī uzzinājāt, kā aptvert divas galvenās kompozīcijas iezīmes; ierobežošana un specializācija. Jūs esat izpētījis dažus praktiskus piemērus, kas palīdz izveidot komponentus, kas ir izturīgāki un atkārtoti lietojami, izmantojot īpašo bērnu balstu.

Šim dialoglodziņam tika izmantots papildus CSS:

App.css:

.Pārklājums {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}


.Brīdinājums {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 20px;
  border-radius: 10px;
}


.Brīdinājums h4 {
  margin-top: 0;
}


button {
  padding: 10px 20px;
  border-radius: 5px;
  border-color:coral;
  color: aliceblue;
  font-weight: bold;
  font-family:monospace
}