In dit bericht zal ik je door een eenvoudig voorbeeld leiden van het gebruik van de context-API van React om informatie tussen componenten door te geven.
Laten we zeggen dat we een eenvoudige app hebben met twee componenten:een is een invoer (in dit geval een vervolgkeuzemenu) en een die het resultaat van de invoer weergeeft.
Hier is de structuur van de app -
En we willen zo informatie uitwisselen tussen de broers en zussen -
Let op: In werkelijkheid is een veel eenvoudigere manier om informatie tussen broers en zussen door te geven, door de staat op te heffen. Ik gebruik alleen dit voorbeeld om het simpel te houden - je zou Context alleen echt gebruiken als de structuur complexer was en je rekwisieten door een aantal componenten moest laten gaan. Je kunt mijn bericht over het opheffen van de staat hier zien.
Dit is waar we naar streven -
Het geselecteerde item uit het vervolgkeuzemenu verschijnt hieronder in de component Resultaat.
De startcode vind je hier.
Het eerste dat we willen doen, is een nieuw bestand maken in onze 'src'-map met de naam Context.js -
Importeer React en { createContext } in het bestand Context.js. Maak vervolgens een variabele om createContext() te bevatten. Je kunt de variabele noemen wat je wilt, maar het is gebruikelijk om het woord 'Context' in de naam te gebruiken.
Maak vervolgens een klassencomponent met de naam 'Provider'. Binnen de provider moeten we de status van de 'seizoen'-waarde initialiseren. We initialiseren het gewoon naar een lege tekenreeks omdat het geen standaardwaarde heeft.
Vervolgens willen we binnen de render onze provider retourneren. Dit doen we door tags toe te voegen (als je je context iets anders hebt genoemd, gebruik deze naam dan voor het eerste deel van de tag). Voeg binnen de tags {this.props.children} toe.
Deze klasse zal op het hoogste niveau van onze applicatie leven en alle gegevens opslaan die we met andere componenten willen delen. Om dit te doen, moeten we een waarde toevoegen aan de <Context.Provider> tags.
Binnen de waarde willen we de status instellen op 'this.state'. Vervolgens voegen we de functie toe die we willen gebruiken om de wijziging af te handelen wanneer de gebruiker een optie selecteert in het vervolgkeuzemenu. We zullen dus een handleChange-functie toevoegen die de staat van 'seizoen' instelt op 'event.target.value' (de optie die is geselecteerd in de vervolgkeuzelijst).
Nu moeten we naar het bestand index.js gaan en de context toevoegen.
Importeer eerst { Provider } uit het contextbestand.
Wikkel de app vervolgens in <Provider> labels. Dit zorgt ervoor dat de hele app toegang heeft tot gegevens in het contextbestand.
Laten we nu naar ons Input.js-bestand gaan en { Context } importeren uit ons Context-bestand.
Wikkel vervolgens het vervolgkeuzemenu in <Context.Consumer> labels. Hierdoor krijgt het vervolgkeuzemenu toegang tot gegevens uit het contextbestand.
Nu moeten we de handleChange-functie die we eerder in het contextbestand hebben gemaakt, toevoegen aan het vervolgkeuzemenu.
Om dit te doen, creëren we een anonieme functie met context in de parameters. Dan kunnen we een onChange-gebeurtenislistener toevoegen aan de <select> tag en stel de waarde in op {context.handleChange}.
Ten slotte moeten we naar het bestand Result.js gaan en het toegang geven tot de staat van 'seizoen'.
We moeten dezelfde stappen herhalen die we hebben gebruikt voor het Input.js-bestand voor het importeren van { Context }, waarbij de component wordt ingepakt in <Context.Consumer> tags en het creëren van een anonieme functie.
Deze keer willen we echter de huidige staat van 'seizoen' weergeven. We doen dit door {context.state.season} toe te voegen aan enkele alineatags.
Dat is het! Als u nu een optie selecteert in het vervolgkeuzemenu, zou deze hieronder moeten worden weergegeven.
Je kunt je definitieve code hier controleren.