简单地写一个例子，使用 React Context 传递数据分成以下三个步骤：

    1. 使用 React.createContext 函数创建一个 Context
    2. 使用 Provider 传递数据
    3. 使用 this.context 或者 Consumer 接收数据

    class 可以使用可以使用 this.context 拿到数据，只需提前拿到 Context 实例即可，拿的方式下面两种等价

    • class 组件内部：static contextType = ThemeContext
    • class 组件外面：Component.contextType = ThemeContext

    函数组件只能通过 Consumer 方式拿到数据，示例如下

    1. function Grandfather(){
    2.   return <Father />
    3. }
    5. function Father(){
    6.   return <Son />
    7. }
    9. function Son(){
    10.   return (
    11.     <TextContext.Consumer>
    12.       {(value)=><Grandson value={value}/>}
    13.     </TextContext.Consumer>
    14.   )
    15. }
    17. function Grandson(props){
    18.   return <h1>{props.value}</h1>
    19. }
    21. const TextContext = React.createContext('Hi')
    22. function App(){
    23.   return (
    24.     <TextContext.Provider value='Hello'>
    25.       <Grandfather />
    26.    </TextContext.Provider>
    27.   )
    28. }
    30. ReactDOM.render(<App />,document.querySelector('#root'))

    「@浪里淘沙的小法师」