You probably came here because your code is calling your component as a plain function call. This is now deprecated:
var MyComponent = require('MyComponent');
function render() {
return MyComponent({ foo: 'bar' }); // WARNING
}
JSX
React components can no longer be called directly like this. Instead you can use JSX.
var React = require('react');
var MyComponent = require('MyComponent');
function render() {
return <MyComponent foo="bar" />;
}
Without JSX
If you don't want to, or can't use JSX, then you'll need to wrap your component in a factory before calling it:
var React = require('react');
var MyComponent = React.createFactory(require('MyComponent'));
function render() {
return MyComponent({ foo: 'bar' });
}
This is an easy upgrade path if you have a lot of existing function calls.
Dynamic components without JSX
If you get a component class from a dynamic source, then it might be unnecessary to create a factory that you immediately invoke. Instead you can just create your element inline:
var React = require('react');
function render(MyComponent) {
return React.createElement(MyComponent, { foo: 'bar' });
}
In Depth
I must say this is quite disappointing for those of us that have opted out of
JSX
. I have feared for a while that non-JSX users might start losing out on features, I just hope this isn't the start of that trend.Can anyone see a reason why the below pattern would be problematic when there is no concern of my modules having to be used with
JSX
(or by anyone outside my team)?At least here, the module still produces a factory, rather than having to wrap every single
require
call.UPDATE: found a definite drawback to this approach,
createFactory
strips thestatics
methods from your component. This is a major problem when usingreact-router
, which relies onstatics
methods for route transition hooks.UPDATE 2: This wreaks havoc on tests. eg, trying to call methods like
getDefaultProps
on the class will fail.then...
this at least saves me from the repeatedly calling
React.createFactory
on the same component. Instead I just require what you need at the moment.