acdlite / acdlite/flummox

React static methods are lost with the higher order component

Open
#173 25 comments 4 reactions 0 assignees View on GitHub
discussion outdated question
Dominant language
JavaScript
Stars
1.7k
Forks
109
PR merge metrics
No merged PRs in 30d

Description

This example supposes `react-router`'s `willTransitionTo` is being used, but the behavior is true for any static methods.

``` javascript
var React = require('react');
var connect = require('flummox/connect');

var SomeRoute = React.createClass({
statics: {
willTransitionTo: function (transition) {
transition.abort();
}
},
render: function () {
return

{ this.props.someProp }

}
});

module.exports = connect(SomeRoute, {
someStore: function (store) {
return {
someProp: store.getSomeProp()
};
}
});
```

`willTransitionTo` will never be called on `SomeRoute` because it's not copied over to the `ConnectedComponent` returned by `connect`.

This significantly affects server rendered components. Another example:

``` javascript
// client

var React = require('react');
var Promise = require('bluebird');
var connect = require('flummox/connect');

var SomeRoute = React.createClass({
statics: {
willRender: function () {
return Promise.delay(3000);
}
}
// etc.
});

// server

router.run(function (Root, state) {
var flux = new Flux;
return Promise.all(
state.routes.map(function (route) {
if (route.handler.willRender != null) {
return route.handler.willRender(flux, state);
}
}).filter(Boolean)
});
```

`willRender` will never be called because it doesn't exist on the handler.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.