Parim võimalik viis väärtuste edastamiseks Reacti komponentide sees

Sõltuvalt olukorrast ja soovitud käitumisest on Reacti komponentide vahel väärtuste edastamiseks mitu erinevat viisi. Siin on mõned levinud lähenemisviisid.

Rekvisiidid:

Kõige tavalisem viis väärtuste edastamiseks komponentide vahel on rekvisiitide kaudu. Rekvisiite kasutatakse andmete edastamiseks ülemkomponendist alamkomponendile. Alamkomponent pääseb prop väärtustele juurde läbi this.props või kasutades destruktureerimist. Näiteks:

// Parent component
function Parent() { const message = "Hello, world!"; return <Child message={message} />;
} // Child component
function Child(props) { return <div>{props.message}</div>;
}

kontekstis:

Kontekst on viis andmete edastamiseks komponentide puusse, ilma et peaksite igal tasandil rekvisiite käsitsi edastama. Kontekst võimaldab jagada komponentide vahel väärtusi, nagu teema, lokaat või autentimise olek, ilma et oleks vaja konkreetset rekvisiiti läbi puu iga taseme. Näiteks:

const MyContext = React.createContext(); // Parent component
function Parent() { return ( <MyContext.Provider value="Hello, world!"> <Child /> </MyContext.Provider> );
} // Child component
function Child() { const message = React.useContext(MyContext); return <div>{message}</div>;
}

Riigi tõstmine:

Mõnikord peate võib-olla edastama andmeid komponentide vahel, mis ei ole vanema ja lapsena otseselt seotud. Sel juhul saate oleku tõsta ühisele esivanemale ja edasi anda rekvisiidina. Näiteks:

// Grandparent component
function Grandparent() { const [count, setCount] = React.useState(0); return ( <div> <Parent count={count} setCount={setCount} /> </div> );
} // Parent component
function Parent(props) { return ( <div> <Child count={props.count} setCount={props.setCount} /> </div> );
} // Child component
function Child(props) { return ( <div> <button onClick={() => props.setCount(props.count + 1)}> Increment count </button> </div> );
}

Neid lähenemisviise järgides saate Reacti komponentide vahel väärtusi edastada viisil, mis sobib teie kasutusjuhtumiga ning aitab teil luua hooldatavaid ja skaleeritavaid rakendusi.

Järgige mind Codementoris, et saada rohkem selliseid näpunäiteid ja nippe.
Palun meeldige mulle ja tellige mind, et olla kursis minu viimaste erinevate teemade artiklitega.

Aitäh !