- 创建Context容器:
import {createContext} from 'react'; export const MyContext=createContext(/*任意初始值(对象,数组等类型)*/)
容器.js
- 从创建的Context容器中取值:
import { useContext } from 'react'; import { MyContext } from '容器.js'; export const son=()=>{ const val=useContext(MyContext);//从容器中取值 console.log(val) //将输出容器内的值 return( <div>{/*此处可显示取出的值*/}</div> ) }
子组件.js
- 使用携带值的容器组件包裹需要该值的子组件:
import { useContext } from 'react'; import { MyContext } from '容器.js'; export const GrandFather=()=>{ const val=useContext(MyContext); return( <MyContext.Provider value={ val }> /*value可为任意数据或从容器中取值*/ <Father> <son/> </Father> </MyContext.Provider> ) }
父父组件.js
子组件通过useContext()取值将穿过父组件直接从最近一层的容器标签取出值,若从内到外一直找不到对应的容器标签提供值,则取初始值。