-
Notifications
You must be signed in to change notification settings - Fork 22
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
React's getChildContext doesn't set child context properly? #2
Comments
Could be related to this (and thus not a FlowLayout issue) — http://stackoverflow.com/questions/30368433/react-context-doesnt-transfer-when-using-a-component-as-prop |
I think it makes sense since we render it outside |
Yeah! It worked. Here's how to get this to work. So, basically, you need to render the component inside the layout. So, we can pass a function as the content. So, here's our layout: AppLayout = React.createClass({
childContextTypes: {
muiTheme: React.PropTypes.string
},
getChildContext: function() {
return {
muiTheme: "blue-theme"
};
},
render() {
return (
<div>
{ this.props.content() }
</div>
)
}
}); Here's our Login component: LoginPage = React.createClass({
contextTypes: {
muiTheme: React.PropTypes.string
},
render() {
return <div>
<h1> Login Page { this.context.muiTheme } </h1>
</div>
}
}); Here's the router: FlowRouter.route('/', {
name: 'register',
action: function(params) {
ReactLayout.render(AppLayout, {
content() { return <LoginPage /> }
});
}
}); |
Ahhh, yes! Works great for me too. Thanks, Arunoda! |
BTW: Would you mind sending a PR to the README mentioning this issue and referencing to here. |
Absolutely. |
This might be a "Duh Bob" moment, but I was also able to use this method (passing a function as the content) to propagate an event up to the layout from a button in a sub-component, and affect props on another component contained in the layout. (Specifically to set button state in a toolbar that is present in all views, so lives in the layout). In Layout.jsx:
And an associated function to set state or whatever: In routes.jsx:
In Component.jsx:
Is this the right way to go about it? It's a bit cumbersome, but it works... |
I just noticed something that might be unrelated but it might be the root cause of this problem as well. WHEN your app throws a RSOD on startup and that is the reason why you want to debug, then it might have happened that you have previously clicked on a stack frame on the RSOD. If you have, then RN communicated with whatever daemon is running on your PC that the command |
If I have a simple root component in React
And a FlowRouter / ReactLayout setup like this
Then within the
render()
method ofAuthRegisterPage
,this.context
is undefined. However, if I don't use{ this.props.content }
and simply have<AuthRegisterPage />
within theAppLayout
component thenthis.context
returns{muiTheme: someobject}
as I'd expect.I'm not a react expert by any means. Am I missing anything?
The text was updated successfully, but these errors were encountered: