Reageer gebruikContext Hook
Reageer Konteks
React Context is 'n manier om staat wêreldwyd te bestuur.
Dit kan saam met die useStateHook gebruik word om toestand tussen diep geneste komponente makliker te deel as met useStatealleen.
Die probleem
Staat moet gehou word deur die hoogste ouerkomponent in die stapel wat toegang tot die staat vereis.
Ter illustrasie het ons baie geneste komponente. Die komponent aan die bo- en onderkant van die stapel benodig toegang tot die staat.
Om dit sonder konteks te doen, sal ons die toestand as "rekwisiete" deur elke geneste komponent moet stuur. Dit word "stutboor" genoem.
Voorbeeld:
Gee "rekwisiete" deur geneste komponente:
import { useState } from "react";
import ReactDOM from "react-dom";
function Component1() {
const [user, setUser] = useState("Jesse Hall");
return (
<>
<h1>{`Hello ${user}!`}</h1>
<Component2 user={user} />
</>
);
}
function Component2({ user }) {
return (
<>
<h1>Component 2</h1>
<Component3 user={user} />
</>
);
}
function Component3({ user }) {
return (
<>
<h1>Component 3</h1>
<Component4 user={user} />
</>
);
}
function Component4({ user }) {
return (
<>
<h1>Component 4</h1>
<Component5 user={user} />
</>
);
}
function Component5({ user }) {
return (
<>
<h1>Component 5</h1>
<h2>{`Hello ${user} again!`}</h2>
</>
);
}
ReactDOM.render(<Component1 />, document.getElementById("root"));
Al het komponente 2-4 nie die staat nodig gehad nie, moes hulle die staat deurgee sodat dit komponent 5 kon bereik.
Word gesertifiseer!
$95 INSKRIF
Die oplossing
Die oplossing is om konteks te skep.
Skep konteks
Om konteks te skep, moet jy dit invoer createContexten inisialiseer:
import { useState, createContext } from "react";
import ReactDOM from "react-dom";
const UserContext = createContext()
Volgende sal ons die konteksverskaffer gebruik om die boom van komponente wat die toestandkonteks benodig, toe te draai.
Konteksverskaffer
Draai kinderkomponente in die konteksverskaffer toe en verskaf die staatwaarde.
function Component1() {
const [user, setUser] = useState("Jesse Hall");
return (
<UserContext.Provider value={user}>
<h1>{`Hello ${user}!`}</h1>
<Component2 user={user} />
</UserContext.Provider>
);
}Nou sal alle komponente in hierdie boom toegang tot die gebruikerkonteks hê.
Gebruik die useContexthaak
Om die Konteks in 'n kinderkomponent te gebruik, moet ons toegang daartoe verkry deur die useContextHook te gebruik.
Sluit eers die useContextin die invoerverklaring in:
import { useState, createContext, useContext } from "react";
Dan het jy toegang tot die gebruikerkonteks in alle komponente:
function Component5() {
const user = useContext(UserContext);
return (
<>
<h1>Component 5</h1>
<h2>{`Hello ${user} again!`}</h2>
</>
);
}
Volledige voorbeeld
Voorbeeld:
Hier is die volledige voorbeeld met behulp van React Context:
import { useState, createContext, useContext } from "react";
import ReactDOM from "react-dom";
const UserContext = createContext();
function Component1() {
const [user, setUser] = useState("Jesse Hall");
return (
<UserContext.Provider value={user}>
<h1>{`Hello ${user}!`}</h1>
<Component2 user={user} />
</UserContext.Provider>
);
}
function Component2() {
return (
<>
<h1>Component 2</h1>
<Component3 />
</>
);
}
function Component3() {
return (
<>
<h1>Component 3</h1>
<Component4 />
</>
);
}
function Component4() {
return (
<>
<h1>Component 4</h1>
<Component5 />
</>
);
}
function Component5() {
const user = useContext(UserContext);
return (
<>
<h1>Component 5</h1>
<h2>{`Hello ${user} again!`}</h2>
</>
);
}
ReactDOM.render(<Component1 />, document.getElementById("root"));