react利用context向下传值简单案例

1.目录结构

react-context-demo    
    config
    node_modules
    public
    script
    src
        App.js
        Header.js
        Title.js
        index.js

2.index.js内容

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  ,
  document.getElementById('root')
);

3.App.js内容

import React,{Component} from 'react';
import PropTypes from 'prop-types';
import Header from './Header';

class App extends Component{
  static childContextTypes={    //context 内容的格式
    themeColor:PropTypes.string
  }
  constructor(props){
    super(props);
    this.state={
      themeColor:'red'
    }
  }
  getChildContext(){        //插入方法
    return{
      themeColor:this.state.themeColor
    }
  }
  render(){
    return(
      

        

      
    )
  }
}

export default App;

    3.Header.js内容

import React,{Component} from 'react';
import Title from './Title';
class Header extends Component{

    render(){
        return(