React_Hooks useContext
useContext transmet la valeur et peut transmettre la valeur entre les composants -> Sun
1. Créez deux composants ReactHooksUseContextF (composant parent), ReactHooksUseContextC (composant enfant)
2.ReactHooksUseContextF (composant parent) Le composant parent utilise createContext pour créer un contexte
import React,{
useState,createContext} from 'react'
import ReactHooksUseContextC from './ReactHooksUseContextC'
export const CountContext = createContext()
const ReactHooksUseContextF = () => {
const [count,setCount]=useState(0)
return (
<div>
<button onClick={
()=>setCount(count+1)}>Click Me</button>
<p>You Clicked {
count} Times</p>
<CountContext.Provider value={
count}>
{
}
<ReactHooksUseContextC/>
</CountContext.Provider>
</div>
)
}
export default ReactHooksUseContextF
3.Le sous-composant ReactHooksUseContextC (sous-composant) utilise useContext pour obtenir le contexte
import React,{
useContext} from 'react'
import {
CountContext} from './ReactHooksUseContextF'
const ReactHooksUseContextC = () => {
const context = useContext(CountContext)
return (
<div>
<h3>{
context}</h3>
</div>
)
}
export default ReactHooksUseContextC