React中使用context通信

React使用context通信

旧版本context——适用于React版本为16.x之前

祖先组件

import PropTypes from 'prop-types'

class Child extends Component {
    static contextTypes = {
      text: PropTypes.string
    }
    render() {
      return <div>{this.context.text}</div>
    }
}

 

后代组件

import PropTypes from 'prop-types'
class Ancestor extends Component {
    static childContextTypes = {
      text: PropTypes.string
    }
    
    getChildContext() {
        return {
            text: 'aaa'
        }
    }
}

 

新版本context

创建一个全局context

import React from 'react'

const GlobalContext = React.createContext();

export default GlobalContext;

 

子组件

import React, {Component} from 'react'
import GlobalContext from './globalContext' // 导入全局context

export default class Child extends Component {
    render() {
        return (
            <GlobalContext.Consumer>
                {context => {
                    console.log(context)
                    return (
                        <div>
                            <h4>{context.name}</h4>
                        </div>
                    )
                }}
            </GlobalContext.Consumer>
        )
    }
}

 

App.js

import Child from './Component/Child'
import GlobalContext from './globalContext'

render() {
    return (
        <div className="App">
          <GlobalContext.Provider
              value = {{
                name: 'aaa',
              }}>
                <Child /> // 被传递的子组件，可多个
          </GlobalContext.Provider>
    )
}