React on populaarne JavaScripti teek, mida kasutatakse laialdaselt kasutajaliideste loomiseks. Üks Reacti põhiomadusi on selle võime edastada väärtusi komponentide vahel. Väärtuste edastamine komponentide vahel on keerukate rakenduste loomise oluline osa ja selle õigeks saamine võib olla keeruline. Selles artiklis käsitleme mõningaid näpunäiteid väärtuste edastamiseks Reacti komponentide vahel optimaalsete tulemuste saavutamiseks.
1. Kasutage rekvisiite
Rekvisiidid on kõige levinum viis väärtuste edastamiseks Reacti komponentide vahel. Rekvisiidid on lühend sõnadest omadused ja neid kasutatakse andmete edastamiseks ühest komponendist teise. Rekvisiit on lihtne objekt, mis sisaldab võtme-väärtuse paare. Võti tähistab rekvisiidi nime ja väärtus edastatavaid andmeid.
Rekvisiidi ülekandmiseks ülemkomponendist alamkomponendile lisage see lihtsalt atribuudina ülemkomponendi renderdusmeetodi alamkomponendile. Näiteks:
```
function Parent() {
tagasi (
);
}
funktsioon Laps(rekvisiidid) {
tagasi (
Nimi: {props.name}
Vanus: {props.age}
);
}
```
Selles näites edastame kaks rekvisiiti, nime ja vanuse, vanemate komponendist komponendile Laps. Lapskomponent võtab need rekvisiidid vastu objektina, mida nimetatakse rekvisiidiks.
2. Kasuta olekut
Olek on veel üks viis väärtuste edastamiseks Reacti komponentide vahel. Olek on objekt, mis esindab komponendi sisemist olekut. Seda kasutatakse andmete salvestamiseks, mis võivad aja jooksul muutuda.
Oleku ülekandmiseks ülemkomponendist alamkomponendile saate selle edastada rekvisiidina. Seejärel saab alamkomponent olekut värskendada, kutsudes välja funktsiooni, mis edastatakse rekvisiidina.
Näiteks:
```
function Parent() {
const [loend, setCount] = useState(0);
tagasi (
);
}
funktsioon Laps(rekvisiidid) {
function handClick() {
rekvisiidid.setCount(rekvisiidid.arv + 1);
}
tagasi (
Arv: {props.count}
);
}
```
Selles näites anname rekvisiidina edasi loendusoleku ja funktsiooni setCount komponendist Parent komponendile Child. Seejärel saab alamkomponent loenduse olekut värskendada, kutsudes välja funktsiooni setCount.
3. Kasutage konteksti
Kontekst on viis väärtuste edastamiseks komponentide vahel, ilma et peaksite neid läbima komponentide puu igal tasandil. Kontekst pakub võimalust jagada andmeid komponentide vahel, mis pole otseselt seotud.
Konteksti kasutamiseks peate esmalt looma kontekstiobjekti, kasutades funktsiooni createContext. Seejärel saate alamkomponentidele konteksti andmiseks kasutada komponenti Pakkuja.
Näiteks:
```
const CountContext = createContext();
function Parent() {
const [loend, setCount] = useState(0);
tagasi (
);
}
function Child() {
const { count, setCount } = useContext(CountContext);
function handClick() {
setCount(count + 1);
}
tagasi (
Arv: {count}
);
}
```
Selles näites kasutame konteksti, et edastada loendusolekut ja funktsiooni setCount komponendist Parent komponendile Child. Seejärel saab alamkomponent loenduse olekut värskendada, kutsudes välja funktsiooni setCount.
Kokkuvõtteks võib öelda, et väärtuste edastamine Reacti komponentide vahel on keerukate rakenduste loomise oluline osa. Rekvisiite, olekut ja konteksti kasutades saate väärtusi komponentide vahel tõhusal ja hõlpsasti hallataval viisil edastada. Nende näpunäidete abil saate tagada optimaalsed tulemused Reacti komponentide väärtuste edastamisel.
- SEO-põhise sisu ja PR-levi. Võimenduge juba täna.
- PlatoAiStream. Web3 luure. Täiustatud teadmised. Juurdepääs siia.
- Allikas: Platoni andmete luure: PlatoData
