React中使用context通信

React使用context通信

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

祖先组件

 1 import PropTypes from 'prop-types'
 2 
 3 class Child extends Component {
 4     static contextTypes = {
 5       text: PropTypes.string
 6     }
 7     render() {
 8       return <div>{this.context.text}</div>
 9     }
10 }

 

后代组件

 1 import PropTypes from 'prop-types'
 2 class Ancestor extends Component {
 3     static childContextTypes = {
 4       text: PropTypes.string
 5     }
 6     
 7     getChildContext() {
 8         return {
 9             text: 'aaa'
10         }
11     }
12 }

 

新版本context

创建一个全局context

1 import React from 'react'
2 
3 const GlobalContext = React.createContext();
4 
5 export default GlobalContext;

 

子组件

 1 import React, {Component} from 'react'
 2 import GlobalContext from './globalContext' // 导入全局context
 3 
 4 export default class Child extends Component {
 5     render() {
 6         return (
 7             <GlobalContext.Consumer>
 8                 {context => {
 9                     console.log(context)
10                     return (
11                         <div>
12                             <h4>{context.name}</h4>
13                         </div>
14                     )
15                 }}
16             </GlobalContext.Consumer>
17         )
18     }
19 }

 

App.js

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

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

 

转载于:https://www.cnblogs.com/pingzi-wq/p/11106857.html