React – rekvizīti un bērni (props&children)

Iepriekš jūs uzzinājāt, ka varat nodot rekvizītus komponentam un komponenta ietvaros. Bet ir arī īpašs rekvizīts, kas pazīstams kā props.childs, kas automātiski tiek nodots katram komponentam. Šajā rakstā jūs uzzināsiet par props.children un to,kāds ir tā mērķis.

Lai saprastu jēdzienu props.children, apsveriet šādu reālās dzīves situāciju: jums ir pāris ābolu un pāris bumbieru. Jums šos ābolus nāksies nest kādu attālumu, tāpēc acīmredzot jūs izmantosiet maisiņu, vai somu.

Tas nav “maiss āboliem”. Tā nav “soma ābolu, vai bumbieru pāriem”. Tā ir tikai parasta universāla soma. Nekas šajā somā nepadara to tādu, ka to vajadzētu saukt par somu, kurā jūs vienmēr nēsājat tikai ābolus, ne arī par somu, kurā jūs vienmēr nēsājat tikai un vienīgi bumbierus.

Savā ziņā soma “nav specifiska”, vai tā nav speciāli paredzēta izmantot ābolu ,vai bumbieru pārnēsāšanai. Somas materiāls, izmērs, forma vai krāsa nemainās, jo tā bez problēmām var tikt galā ar ābolu vai bumbieru ievietošanu tajā.

Tagad apsveriet šādu komponentu:

function Apples(props) {
  return (
    <div className="promo-section">
        <div>
            <h2>Šie āboli ir: {props.color}</h2>
            </div>
            <div>
            <h3>Tie ir {props.number} āboli.</h3>
        </div>
    </div>
  )
}
export default Apples
Ir arī bumbieru sastāvdaļa:

function Pears(props) {
  return (
    <h2>Man nepatīk bumbueri, bet manam draugam, {props.friend}, tie garšo</h2>
  )
}

Tagad jautājums ir šāds:

pieņemsim, ka vēlaties, lai maisam, vais somai būtu tāda sastāvdaļa, ko var izmantot, lai “pārvadātu” ābolus vai bumbierus. Kā jūs to darītu?

Šeit parādās props.children.

Somas komponentu var definēt šādi:

function Soma(props) {
    const soma = {
        padding: "20px",
        border: "1px solid gray",
        background: "#fff",
        margin: "20px 0"
    }
    return (
        <div style={soma}>
            {props.children}
        </div>
    )
}
export default Soma

Tātad, ko tas dara komponentā Soma: tas pievieno iesaiņojuma div ar noteiktu stilu un pēc tam piešķir tai props.childs kā saturu.

Bet kas tas par props.children?

Apsveriet ļoti vienkāršu piemēru:

<Example>
    Sveiki visiem
</Example>

Teksts Sveiki, ir JSX elementa piemērs. Iepriekš minētais JSX piemērs ir faila Example.js “izsaukums”, kas mūsdienu React parasti ir funkcijas komponents.

Vai zinājāt, ka šo “Sveiki visiem” teksta daļu var nodot kā nosauktu rekvizītu, renderējot Example komponentu?

Lūk, kā tas izskatītos:

<Example children="Sveiki visiem" />

Labi, ir divi veidi, kā to izdarīt. Bet tas ir tikai sākums.

Ko darīt, ja jūs, teiksim, vēlētos iekļaut tekstu Sveiki h3 HTML elementā?

Acīmredzot JSX tas ir viegli sasniedzams:

<Example children={<h3>Sveiki visiem</h3>} />

Ko darīt, ja <h3>Sveiki</h3> būtu atsevišķs komponents, piemēram, ar nosaukumu Sveiki?

Tādā gadījumā jums būs jāatjaunina kods šādi:

<Example children={<Sveiki />} />
Jūs pat varētu padarīt “Sveiki” komponentu dinamiskāku, piešķirot tam savu rekvizītu:
<Example children={<Sveiki message="Sveiki visiem" />} />

Tātad, ņemot vērā piemērus par maisiņu, āboliem un bumbieriem no šī raksta sākuma, bruņojoties ar šīm jaunajām zināšanām, kā jūs varat panākt, lai tas darbotos?

Lūk, kā atveidot komponentu Soma ar komponentu Apples kā props.childs:

<Soma children={<Apples color="yellow" number="5" />} />
Tālāk ir norādīts, kā atveidot maisa komponentu, iesaiņojot komponentu Bumbieri:
<Soma children={<Bumbieri draugs="Juris" />} />

Lai gan iepriekš minētā sintakse varētu izskatīties mazliet dīvaina, ir svarīgi saprast, kas notiek “zem pārsega”.

Faktiski iepriekš minētā sintakse ir tāda pati kā divos tālāk norādītajos piemēros.

<Soma>
    <Apples color="yellow" number="5" />
</Soma>


<Soma>
    <Pears draugs="Juris" />
</Soma>

Jums var būt pat vairāki ligzdotu JSX elementu līmeņi vai viens JSX elements ar vairākiem bērniem, piemēram:

<Kaste>
    <Soma>
        <Apples color="yellow" number="5" />
        <Pears draugs="Juris" />
    </Soma>
</Kaste>

Tātad iepriekš minētajā struktūrā ir elements Kaste JSX, kura iekšpusē ir viens Soma JSX elements, kurā ir Apples un Pairs JSX elements.

Pirms šī raksta beigām vēlreiz apsveriet šo JSX elementu:

<Soma>
    <Apples color="yellow" number="5" />
</Soma>

Kas ir Apples to Soma iepriekš minētajā kodā?

Iepriekš minētajā kodā Apples ir Soma komponenta props. Lai paskaidrotu sīkāk, komponents Soma var ietīt Apples komponentu vai jebkuru citu komponentu, jo es izmantoju {props.children} sintaksi Soma komponenta funkcijas deklarācijā. Citiem vārdiem sakot, tāpat kā reālajā pasaulē, kad paņemat somu uz pārtikas preču veikalu, somā varat “ietīt” dažādus pārtikas produktus, tāpat kā React var darīt to pašu: ietīt dažādas sastāvdaļas. Soma komponenta iekšpusē, izmantojot children prop, lai to panāktu.

Strādājot ar React, ir ļoti svarīgi to saprast.

Pirms šī raksta beigām ir vēl viens svarīgs jēdziens, kas jums jāzina: atrast pareizo modularizācijas apjomu (finding the right amount of modularization). Ko tas nozīmē? Piemēram, iedomājieties, ka jums ir vairākas mazas somas un katrā somā varēja pārvadāt tikai vienu ābolu vai bumbieri. Jums nāktos ietīt katru “ābols” “maisā”. Tam nav lielas jēgas. Varat domāt par komponentiem, kas līdzīgā veidā padara jūsu izkārtojumus modulārus. Jūs nevēlaties, lai viss izkārtojums būtu ietverts vienā komponentā, jo ar to būtu ļoti grūti strādāt. No otras puses, ja jūs padarītu katru HTML elementu savā izkārtojumā par atsevišķu komponentu, tas ļoti apgrūtinātu darbu, lai gan šāds izkārtojums būtu modulārs. Tātad viss ir par mērenību. Jums ir jāsakārto izkārtojumi, sadalot tos nozīmīgos lapas apgabalos, un pēc tam iekodējiet šīs nozīmīgos apgabalus kā atsevišķus komponentus. tas būtu pareizais modularitātes apjoms. Lai to pastiprinātu, varētu palīdzēt to pārdomāt tā, kā cilvēks raksturotu vietni: tur ir izvēlne, kājene, iepirkumu grozs utt.
Noslēgumā jāsaka, ka, redzot JSX elementu, kas apvij kādu citu JSX elementu, varat viegli saprast, ka tas viss ir tikai props.children šī visa fonā.

Loading

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