Fixes passing in context to nested components

goatslacker · Apr 19, 2015 · 21d4d6d · 21d4d6d
1 parent 8f41626
commit 21d4d6d
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 0 deletions.
diff --git a/components/mixinContainer.js b/components/mixinContainer.js
@@ -15,6 +15,15 @@ function mixinContainer(React) {
       flux: React.PropTypes.object
     },
 
+    childContextTypes: {
+      flux: React.PropTypes.object
+    },
+
+    getChildContext: function () {
+      var flux = this.props.flux || this.context.flux
+      return flux ? { flux: flux } : {}
+    },
+
     getInitialState: function () {
       if (this.props.stores && this.props.store) {
         throw new ReferenceError('Cannot define both store and stores')

diff --git a/test/store-listener-component-test.js b/test/store-listener-component-test.js
@@ -502,5 +502,45 @@ export default {
       assert.isDefined(strong, 'component exists')
       assert(strong.props.x === 1337, 'and we have props from TestStore')
     },
+
+    'nested components and context'() {
+      const flux = new Flux()
+
+      const View = React.createClass({
+        render() {
+          return <SubView />
+        }
+      })
+
+      const SubView = React.createClass({ render() {
+        return (
+          <AltContainer>
+            <InsideComponent />
+          </AltContainer>
+        )
+      } })
+
+      const InsideComponent = React.createClass({
+        render() {
+          return <span flux={this.props.flux} />
+        }
+      })
+
+
+      const App = React.createClass({
+        render() {
+          return (
+            <AltContainer flux={flux}>
+              <View />
+            </AltContainer>
+          )
+        }
+      })
+
+      const node = TestUtils.renderIntoDocument(<App />)
+      const span = TestUtils.findRenderedDOMComponentWithTag(node, 'span')
+
+      assert.instanceOf(span.props.flux, Flux)
+    },
   }
 }