Contexto de uso de React_Hooks

Contexto de uso de React_Hooks

useContext pasa valor y puede pasar valor entre componentes -> Sun

1. Cree dos componentes ReactHooksUseContextF (componente principal), ReactHooksUseContextC (componente secundario)

2.El componente principal ReactHooksUseContextF (componente principal) usa createContext para crear contexto

import React,{
    
    useState,createContext} from 'react'//1导入createContext
import ReactHooksUseContextC from './ReactHooksUseContextC'//2.导入子组件
export const CountContext = createContext()//3.导出CountContext
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}>
                {
    
    /* 4.定义provider，放入子组件 value传值 */}
                <ReactHooksUseContextC/>
            </CountContext.Provider>
        </div>
    )
}

export default ReactHooksUseContextF

3.El subcomponente ReactHooksUseContextC (subcomponente) utiliza useContext para obtener contexto

import React,{
    
    useContext} from 'react'//5。导入useContext
import {
    
    CountContext} from './ReactHooksUseContextF'//6.导入父组件CountContext
const ReactHooksUseContextC = () => {
    
    
    const context = useContext(CountContext)//7。使用CountContext
    return (
        <div>
            <h3>{
    
    context}</h3>
        </div>
    )
}

export default ReactHooksUseContextC