新版本react的context使用

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 } = ctx
export const withComponent = Component => props => <Consumer>{ propsObj => <Component { ...props } propsObj={propsObj}></Component> }</Consumer>
export default ctx

index.js

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

import React, { Component } from 'react
import { Provider } from './connect.js
import 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 'react
import { withComponent } from './connect.js
class Carder extends Component {
    state = {
        test: false
    }
    render() {
        return (
            <div>
                <p>test的值为：{this.props.test}</p>
            </div>
        )
    }
}
export default withComponent(Carder )