Context 通过组件树提供了一个传递数据的方法，从而避免了在每一个层级手动的传递 props 属性。

在一个典型的 React 应用中，数据是通过 props 属性由上向下（由父及子）的进行传递的，但这对于某些类型的属性而言是极其繁琐的（例如：地区偏好，UI主题），这是应用程序中许多组件都所需要的。 Context 提供了一种在组件之间共享此类值的方式，而不必通过组件树的每个层级显式地传递 props 。

参考文档： https://react.docschina.org/d...

connect.js

import React from 'react'const ctx = React.createContext()export const { Provider, Consumer } = ctxexport const withComponent = Component => props => <Consumer>{ propsObj => <Component { ...props } propsObj={propsObj}></Component> }</Consumer>export default ctx

index.js
在最外层组件引入 Provider(*注意Provider的value名字不能改变)

import React, { Component } from 'reactimport { Provider } from './connect.jsimport Carder from './carder.js'export default class Index extends Component {    state = {        test: false    }    render() {        return (            <Provider value={this.state.test}>                <Carder>            </Provider>        )    }}

carder.js

import React, { Component } from 'reactimport { withComponent } from './connect.jsclass Carder extends Component {    state = {        test: false    }    render() {        return (            <div>                <p>test的值为：{this.props.test}</p>            </div>        )    }}export default withComponent(Carder )