Context exploration

component-child.jsx

var React = require('react')

var Message = require('sub-component/message')

class Component extends React.Component {
    getChildContext () {
        return {
            message: this.props.foo
        }
    }

    render () {
        return (
            <Message />
        )
    }
}

Component.childContextTypes = {
    message: React.PropTypes.string
}

console.log(React.renderToString(<Component foo="bar" />))

component-grandchild.jsx

var React = require('react')

var SubComponent = require('sub-component')

class Component extends React.Component {
    getChildContext () {
        return {
            message: this.props.foo
        }
    }

    render () {
        return (
            <SubComponent />
        )
    }
}

Component.childContextTypes = {
    message: React.PropTypes.string
}

console.log(React.renderToString(<Component foo="bar" />))

sub-component--index-with-context.jsx

var React = require('react')
var Message = require('./message')

class SubComponent extends React.Component {
    getChildContext () {
        return {
            message: this.context.message
        }
    }

    render () {
        return (
            <Message />
        )
    }
}

SubComponent.contextTypes = {
    message: React.PropTypes.string
}

SubComponent.childContextTypes = {
    message: React.PropTypes.string
}

module.exports = SubComponent

sub-component--index.jsx

var React = require('react')
var Message = require('./message')

class SubComponent extends React.Component {
    render () {
        return (
            <Message />
        )
    }
}

module.exports = SubComponent

sub-component--message.jsx

var React = require('react')

class Message extends React.Component {
    render () {
        return <span>{this.context.message}</span>
    }
}

Message.contextTypes = {
    message: React.PropTypes.string
}

module.exports = Message

Did you ever find a solution for this?