Context意思为上下文,用于根组件直接把数据给子组件,不必一层一层繁琐的传递props
1.引入createContext
import { createContext } from "react"
2.创建上下文对象
const BatteryContext=createContext();//里面可以放一个初始值
//传入的默认值相当于下文中的value
3.使用上下文对象提供数据
<BatteryContext.Provider
value='60'
>
<Middle></Middle>
</BatteryContext.Provider>
4.使用上下文对象获取数据
const Leaf=()=>{
return (
<BatteryContext.Consumer>
{
value=><h1>consumer获取的provider的值是{value}</h1>
}
</BatteryContext.Consumer>
)
}
const Middle=()=>{
return (
<Leaf/>
)
}