React Context

context-demo-2.js

/* 

  This is the equivalent minimal demo of the above using ES6 class to define React component 
  
*/ 


// Parent

class Parent extends React.Component {

  getChildContext() {
    return {
      eventBus: this.props.eventBus,
      engine: this.props.engine
    }
  }

  static childContextTypes = {
    eventBus: React.PropTypes.object.isRequired,
    engine: React.PropTypes.object.isRequired
  }

  render() {
    return <div>{this.props.children}</div>
  }

}


// Child 

class Child extends React.Component {

  static contextTypes = {
    engine: React.PropTypes.object.isRequired
  }

  render() { 
    return this.props.children;
  } 

}


// GrandChild 

class GrandChild extends React.Component {

  static contextTypes = {
    eventBus: React.PropTypes.object.isRequired
  }

  render() { 
    return <span>this is grand child</span>;
  } 

}


// root rendering 
ReactDOM.render(
  <Parent eventBus={{push: f => f}} engine={{version: "1"}}>
    <Child>
      <GrandChild />
    </Child>
  </Parent>, 
  document.getElementById('root')
);

context-demo.js

/*

As of around late Nov 2014 (possibly starting on react 0.13.0), React now use parent-based context
rather than previously owner-based context. 

React Context (experimental) feature allow parent component to pass data through
child components anywhere deeps in the hierarchy without having wired it manually via props. 

The following minimal demo shows how parent-based context in action. 

*/


// First, in the parent node it must provide `getChildContext` and `childContextTypes`

var Parent = React.createClass({

  displayName: 'Parent',

  getChildContext: function() {
    return {
      eventBus: this.props.eventBus,
      engine: this.props.engine
    }
  },

  childContextTypes: {
    eventBus: React.PropTypes.object.isRequired,
    engine: React.PropTypes.object.isRequired
  }, 

  render: function() {
    return <div>{this.props.children}</div>
  }

});


// Second, anywhere in the child or grand grand child, provide `contextTypes` for items it were interested on. 

var Child = React.createClass({

  displayName: 'Child',

  contextTypes: {
    engine: React.PropTypes.object.isRequired
  },

  render: function() { 
    return this.props.children;
  } 
});


// And this is from grand child 

var GrandChild = React.createClass({

  displayName: 'GrandChild', 

  contextTypes: {
    eventBus: React.PropTypes.object.isRequired
  },

  render: function() {
    return <span>this is grand child</span>;
  }
});


// This is the final wiring, the root rendering

ReactDOM.render(
  <Parent eventBus={{push: f => f}} engine={{version: "1"}}>
    <Child>
      <GrandChild />
    </Child>
  </Parent>, 
  document.getElementById('root')
);

Using ES6 class that do not support static, --probably static was in ES7,
the static part must be moved outside class declaration, e.g. for the Parent class, the childContextTypes must be written like:

class Parent extends React.Component {

  getChildContext() {
    return {
      eventBus: this.props.eventBus,
      engine: this.props.engine
    }
  }

  render() {
    return <div>{this.props.children}</div>
  }

}

Parent.childContextTypes = {
  eventBus: React.PropTypes.object.isRequired,
  engine: React.PropTypes.object.isRequired
}

The same things for contextTypes must be done on Child and GrandChild class.