isReactComponent() returns false for components without render()

[oluckyman]

I have few components which render() method encapsulated into mixin.
Like so:

var Mixin = {
  render() {
    return (
      <h1>{ this.prop.header }</h1><div>{ this._renderBody() }</div>
    );
  }
};

var Comp1 = React.createClass({
  mixins: [ Mixin ],
  _renderBody() {
    return 'comp 1';
  }
});

var Comp2 = React.createClass({
  mixins: [ Mixin ],
  _renderBody() {
    return 'comp 2';
  }
});

And because of that some rules are ignored (e.g. sort-comp rule).
So I propose to check when there is no render() method inside component if the mixins prop is declared or not.

[yannickcr]

For ES5 classes we can simplify the detection and just rely on the React.createClass presence, it would solve your problem.

But for ES6 classes it is more difficult since there is no real difference between a standard ES6 class and a React component, that why currently we just search for a class with a render method that return some JSX (or null).

[jbrumwell]

Just ran into this same problem, we have a render method declared but it doesn't return a JSXElement directly so it gets ignored (sort-comp rule);

something along the lines of;

render() {
   const method = this.state.loading ? 'renderLoading' : 'renderList';

   return this[ method ]();
}

[epmatsw]

So I'm running into this issue in a slightly different variant. I'm actually looking at running sort-comp on the output from CJSX, which gives me a render which looks like

return React.createClass({
  render: function() {
    return React.createElement("div", null, this.props.test);
  },
  displayName : 'Table'
});

Because the render contains compiled JSX rather than actual JSX, it gets skipped.

[lencioni]

It might be useful to check out react-codemod's ReactUtils to see the methods they use for this kind of thing.

[ljharb]

I'm going to close this; in general, component detection needs some work, but there's been many updates since this was filed.

New issues with concrete and actionable improvements are welcome!