Skip to content

Instantly share code, notes, and snippets.

@smoidu
Created April 5, 2016 00:14
Show Gist options
  • Save smoidu/90021635b85ccd667e5f35ba510dbfeb to your computer and use it in GitHub Desktop.
Save smoidu/90021635b85ccd667e5f35ba510dbfeb to your computer and use it in GitHub Desktop.
const { Router,
Route,
IndexRoute,
Redirect,
Link,
IndexLink
} = ReactRouter
const Wrap = function(Component) {
return React.createClass({
displayName: "Wrap",
componentDidMount() {
console.log(`Wrap:${Component.displayName}:DidMount`);
},
componentWillUnmount() {
console.log(`Wrap:${Component.displayName}:WillUnmount`);
},
componentDidUpdate(prevProps) {
console.log(`Wrap:${Component.displayName}:DidUpdate`);
},
render() {
return <Component {...this.props} />;
}
});
}
const Index = React.createClass({
displayName: "Index",
componentDidMount() {
console.log("Index:DidMount");
},
componentWillUnmount() {
console.log("Index:WillUnmount");
},
componentDidUpdate(prevProps) {
console.log("Index:DidUpdate");
},
render() {
return (
<div>
<h1>Index</h1>
<Link to="/1">SubComponent</Link>
<p />
<Link to="/">Index</Link>
</div>
)
}
})
const SubComponent = React.createClass({
displayName: "SubComponent",
componentDidMount() {
console.log("SubComponent:DidMount");
},
componentWillUnmount() {
console.log("SubComponent:WillUnmount");
},
componentDidUpdate(prevProps) {
console.log("SubComponent:DidUpdate");
},
render() {
return (
<div>
<h1>Subcomponent</h1>
<Link to="/1">SubComponent</Link>
<p />
<Link to="/">Index</Link>
</div>
)
},
})
const App = React.createClass({
displayName: "app",
componentDidMount() {
console.log("app:DidMount");
},
componentWillUnmount() {
console.log("app:WillUnmount")
},
componentDidUpdate(prevProps) {
console.log("app:DidUpdate");
},
render() {
return (
<div>
{this.props.children}
</div>
)
}
})
const WrapElements = function(Component, props) {
if (Component.displayName == "Index" || Component.displayName == "SubComponent" || true) {
let Wrapped = Wrap(Component);
return <Wrapped {...props} />;
} else {
return <Component {...props} />;
}
}
React.render((
<Router createElement={WrapElements}>
<Route path="/" component={App}>
<IndexRoute component={Index} />
<Route path=":id" component={SubComponent} />
</Route>
</Router>
), document.getElementById('app'))
@smoidu
Copy link
Author

smoidu commented Apr 5, 2016

wrapped base component will get unmounted/mounted when routes are switched between its two subcomponents, instead of receiving willReceiveProps/didUpdate as expected.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment