React hooks之useContext的使用

1:通过createContext创建自己的context

2: 定义要传递的数据

3:用Provider 包裹要接收数据的组件

// 1: 通过createContext创建自己的context
const userContext = createContext()
const App = () => {
  // 2: 定义要传递的数据
  const userInfo = { name: 'superTiger_y', age: 22 }
  return (
    // 3: xxx.Provider 包裹要接收数据的组件
    
      

        
      
      

        
      
    
  )
}

4:在对应组件中通过useContext的方式接收数据

const Child1 = () => {
  // 4: 在对应组件中通过useContext的方式接收数据
  const { name } = useContext(userContext)
  return (
    

      博客名:{name}
    
  )
}

const Child2 = () => {
  // 4: 在对应组件中通过useContext的方式接收数据
  const { age } = useContext(userContext)
  return (
    

      年龄:{age}
    
  )
}