一 useContext

为什么要使用Context？ 因为有些属性是全局需要的。比如主题。你一个App确定了主题，下面一个left组件需要用，left里面的item也要用。 useContext可以在任何子组件，直接访问祖先组件提供的state。 下面一个例子带大家快速入门useContext

一 在App.tsx中

1 建立模板

export default ( )=> {
   return (<div>

    </div>)
}

2 定义要传输的数据

interface Icontex {
  count: number
}

3 向外导出context对象，让子组件接收 context里面有一个Provider对象，需要用这个包裹需要state的子元素，并传入vlaue值，就是你要传入的数据

export const context = React.createContext({} as Icontex)

4 使用Provider包裹子组件

export default () => {
  return (
    <context.Provider
    // Provider有一个value属性，需要你传入你要共享的数据
      value={{
        count: 1
      }}
    >
    // --- Child组件在Provider中
      <Child/>
    </context.Provider>
  )
}

5 最后的总体代码

import React, { useContext } from 'react'
import Child from './Components/Child'
// 1 定义要传输的数据
interface Icontex {
  count: number
}
// 2 向外导出context对象，让子组件接收
export const context = React.createContext({} as Icontex)

export default () => {
  return (
    <context.Provider
    // 3 传入你定义的数据对象
      value={{
        count: 1
      }}
    >
      <Child/>
    </context.Provider>
  )
}

二 在child子组件中，

使用useContext获得共享的数据

import { context } from "../App"
import { useContext } from "react"
export default ( )=> {
 //使用useContext获得父组件的值
  const value = useContext(context)
   return (<div>
     父组件传入的数据----{value.count}
    </div>)
}

最终效果

以上，是一个简单的useContext例子