context使用(组件通信方式之一)

context 通过组件树进行数据传递的方式。
优点:跨级组件不需要一级一级的传递props,比如孙组件可以直接访问到祖组件的数据。
缺点:

旧版使用方式(16.x以下版本)

// 一、父级组件
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import RouterCom from './router';
import '../assets/css/App.css';

class App extends Component {
	/*
	1、使用静态方法childContextTypes定义context对象属性
	2、父组件中提供状态管理数据
	3、通过getChildContext来返回context对象
	*/
	// 1.1、有状态子组件
	static childContextTypes = {
		globalMsg : PropTypes.object
	}
	// 2.1、
	state = {
		globalMsg : {}
	}
	// 3.1、
	getChildContext () {
		return {globalMsg: this.state.globalMsg}
	}
  	render() {
    	return (
      		
); } } // 1.2、针对为状态子组件不可使用静态方法 /* App.childContextTypes = { globalMsg: PropTypes.string } */ export default App;
// 二、子组件/孙组件
import React, { Component } from 'react';
import PropTypes from 'prop-types';

class Login extends Component {
	// 1、声明需要使用的context对象的属性。若没有声明,取到的值为undefine。
	static contextTypes = {
		globalMsg: PropTypes.object
	}
	constructor (context) {
		super();
	}
	render () {
		return (
			
拿到的曾组件context属性a的值为:{this.context.globalMsg.a}
) } } export default Login;

你可能感兴趣的:(React)