context

by Artem

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://npmcdn.com/react@latest/dist/react-with-addons.js"></script>
<script src="https://npmcdn.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="mount-point">
    <!-- This element's contents will be replaced with your component. -->
</div>

CSS

.parent {
  background-color: tomato;
  padding: 10px 15px;
}

.child {
  background-color: lightblue;
  padding: 10px 15px;
}

JavaScript 1.7

'use strict';

const Parent = React.createClass({
  getChildContext() {
    return {
      parentValue: 'parent-value'
    };
  },
  childContextTypes: {
    parentValue: React.PropTypes.string
  },
  render() {
    return(
      <div className="parent">
      	<Child />
      </div>  
    );
  }
});

const Child = React.createClass({
	contextTypes: {
  	parentValue: React.PropTypes.string
  },
  render() {
  	return (
    	<div className="child">{this.context.parentValue}</div>
    );
  }
});

ReactDOM.render(
  <Parent />,
  document.getElementById('mount-point')
);