新版本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 = {
        testObj: {
            test: false,
            reverse: () => this.setState({...this.state.test.obj, test: !this.state.test})
        }
            
            
    }
    render() {
        return (
            <Provider value={this.state.testObj}>
                <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.testObj.test}</p>
                <button onClick={this.props.testObj.reverse}>點擊</button>
            </div>
        )
    }
}
export default withComponent(Carder )