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> ) }