react使用Context

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/>
  )
}