createContext

const SomeContext = createContext(defaultValue)

• Referenssi
  • createContext(defaultValue)
  • SomeContext.Provider
  • SomeContext.Consumer
• Käyttö
  • Kontekstin luominen
  • Kontekstin tuominen ja vieminen tiedostosta
• Vianmääritys
  • En löydä tapaa muuttaa kontekstin arvoa

Referenssi

createContext(defaultValue)

Kutsu createContext -funktiota komponenttien ulkopuolella luodaksesi kontekstin.

import { createContext } from 'react';

const ThemeContext = createContext('light');

Katso lisää esimerkkejä alapuolelta.

Parametrit

• defaultValue: Arvo, jonka haluat kontekstilla olevan, kun puun yläpuolella olevista komponenteista ei löydy vastaavaa kontekstin tarjoajaa. Jos sinulla ei ole mitään merkityksellistä oletusarvoa, määritä null. Oletusarvo on tarkoitettu “viimeisenä keinona” vara-arvona. Se on staattinen eikä muutu ajan myötä.

Palautukset

createContext palauttaa kontekstiolion.

Kontekstiolio itsessään ei sisällä mitään tietoa. Se edustaa minkä kontekstin muita komponentteja lukee tai tarjoaa. Tyypillisesti käytät SomeContext.Provider ylemmissä komponenteissa määrittääksesi kontekstin arvon ja kutsut useContext(SomeContext) -komponenttia alempana lukeaksesi sen. Kontekstioliossa on muutama ominaisuus:

• SomeContext.Provider avulla voit tarjota kontekstin arvon komponenteille.
• SomeContext.Consumer on vaihtoehtoinen ja harvoin käytetty tapa lukea kontekstin arvo.

SomeContext.Provider

Kääri komponenttisi kontekstin tarjoajaan määrittääksesi tämän kontekstin arvon kaikille sisäpuolella oleville komponenteille:

function App() {
  const [theme, setTheme] = useState('light');
  // ...
  return (
    <ThemeContext.Provider value={theme}>
      <Page />
    </ThemeContext.Provider>
  );
}

Propsit

• value: Arvo, jonka haluat välittää kaikille tämän tarjoajan sisällä oleville kontekstin lukeville komponenteille, riippumatta siitä, kuinka syvällä ne ovat. Kontekstin arvo voi olla mitä tahansa tyyppiä. Komponentti, joka kutsuu useContext(SomeContext) -Hookkia tarjoajan sisällä, saa value:n vastaavasta kontekstin tarjoajasta, joka on sen yläpuolella.

SomeContext.Consumer

Ennen kuin useContext oli olemassa, oli vanhempi tapa lukea konteksti:

function Button() {
  // 🟡 Vanha tapa (ei suositella)
  return (
    <ThemeContext.Consumer>
      {theme => (
        <button className={theme} />
      )}
    </ThemeContext.Consumer>
  );
}

Vaikka tämä vanhempi tapa silti toimii, uuden koodin tulisi lukea konteksti useContext() -hookilla:

function Button() {
  // ✅ Suositeltu tapa
  const theme = useContext(ThemeContext);
  return <button className={theme} />;
}

Propsit

• children: Funktio. React kutsuu funktiota, johon välität nykyisen kontekstin arvon, joka on määritetty samalla algoritmilla kuin useContext() tekee, ja renderöi tuloksen, jonka palautat tästä funktiosta. React myös uudelleen suorittaa tämän funktion ja päivittää käyttöliittymän aina kun konteksti ylemmistä komponenteista muuttuu.

Käyttö

Kontekstin luominen

Contekstin avulla komponentit voivat välittää tietoa syvälle ilman, että ne välittävät eksplisiittisesti propseja.

Kutsu createContext -funktiota komponenttien ulkopuolella luodaksesi yhden tai useamman kontekstin.

import { createContext } from 'react';

const ThemeContext = createContext('light');
const AuthContext = createContext(null);

createContext palauttaa kontekstiolion. Komponentit voivat lukea kontekstin välittämällä sen useContext() -hookille:

function Button() {
  const theme = useContext(ThemeContext);
  // ...
}

function Profile() {
  const currentUser = useContext(AuthContext);
  // ...
}

Oletuksena arvot, jotka ne saavat, ovat oletusarvoja, jotka olet määrittänyt luodessasi kontekstit. Kuitenkin, itsessään tämä ei ole hyödyllistä, koska oletusarvot eivät koskaan muutu.

Kontekstit ovat hyödyllisiä, koska voit tarjota muita, dynaamisia arvoja komponenteistasi:

function App() {
  const [theme, setTheme] = useState('dark');
  const [currentUser, setCurrentUser] = useState({ name: 'Taylor' });

  // ...

  return (
    <ThemeContext.Provider value={theme}>
      <AuthContext.Provider value={currentUser}>
        <Page />
      </AuthContext.Provider>
    </ThemeContext.Provider>
  );
}

Nyt Page komponentti ja kaikki sen sisällä olevat komponentit, riippumatta siitä kuinka syvällä, “näkevät” välitetyt kontekstin arvot. Jos välitetyt kontekstin arvot muuttuvat, React uudelleen renderöi myös kontekstin lukevat komponentit.

Lue lisää kontekstin lukemisesta sekä tarjoamisesta ja katso esimerkkejä.

Kontekstin tuominen ja vieminen tiedostosta

Usein, eri tiedostoissa olevat komponentit tarvitsevat pääsyn samaan kontekstiin. Tämän vuoksi on yleistä määrittää kontekstit erillisessä tiedostossa. Voit sitten käyttää export -lauseketta tehdäksesi kontekstin saataville muille tiedostoille:

// Contexts.js
import { createContext } from 'react';

export const ThemeContext = createContext('light');
export const AuthContext = createContext(null);

Muissa tiedostoissa määritellyt komponentit voivat sitten käyttää import -lauseketta lukeakseen tai tarjotakseen tämän kontekstin:

// Button.js
import { ThemeContext } from './Contexts.js';

function Button() {
  const theme = useContext(ThemeContext);
  // ...
}

// App.js
import { ThemeContext, AuthContext } from './Contexts.js';

function App() {
  // ...
  return (
    <ThemeContext.Provider value={theme}>
      <AuthContext.Provider value={currentUser}>
        <Page />
      </AuthContext.Provider>
    </ThemeContext.Provider>
  );
}

Tämä toimii samalla tavalla kuin komponenttien tuominen ja vieminen.

Vianmääritys

En löydä tapaa muuttaa kontekstin arvoa

Seuraavanlainen koodi määrittää oletusarvon kontekstin arvolle:

const ThemeContext = createContext('light');

Tämä arvo ei koskaan muutu. React käyttää tätä arvoa vain varmuusarvona, jos se ei löydä vastaavaa tarjoajaa yläpuolelta.

Jotta konteksti muuttuisi ajan myötä, lisää tila ja kääri komponentit kontekstin tarjoajaan.