Fix prefer-stateless-function to allow components with childContextTypes (fixes #853)

Author: yannickcr

lib/rules/prefer-stateless-function.js

@@ -235,6 +235,16 @@ module.exports = {
       });
     };
 
+    /**
+     * Mark childContextTypes as declared
+     * @param {ASTNode} node The AST node being checked.
+     */
+    var markChildContextTypesAsDeclared = function (node) {
+      components.set(node, {
+        hasChildContextTypes: true
+      });
+    };
+
     /**
      * Mark a setState as used
      * @param {ASTNode} node The AST node being checked.
@@ -302,9 +312,17 @@ module.exports = {
 
       // Mark `this` usage
       MemberExpression: function(node) {
-        // Ignore calls to `this.props` and `this.context`
         if (node.object.type !== 'ThisExpression') {
+          if (node.property && node.property.name === 'childContextTypes') {
+            var component = utils.getRelatedComponent(node);
+            if (!component) {
+              return;
+            }
+            markChildContextTypesAsDeclared(component.node);
+            return;
+          }
           return;
+        // Ignore calls to `this.props` and `this.context`
         } else if (
           (node.property.name || node.property.value) === 'props' ||
           (node.property.name || node.property.value) === 'context'
@@ -358,6 +376,7 @@ module.exports = {
             list[component].useThis ||
             list[component].useRef ||
             list[component].invalidReturn ||
+            list[component].hasChildContextTypes ||
             (!utils.isES5Component(list[component].node) && !utils.isES6Component(list[component].node))
           ) {
             continue;

tests/lib/rules/prefer-stateless-function.js

@@ -255,6 +255,19 @@ ruleTester.run('prefer-stateless-function', rule, {
         ');'
       ].join('\n'),
       parser: 'babel-eslint'
+    }, {
+      // Has childContextTypes
+      code: [
+        'class Foo extends React.Component {',
+        '  render() {',
+        '    return <div>{this.props.children}</div>;',
+        '  }',
+        '}',
+        'Foo.childContextTypes = {',
+        '  color: React.PropTypes.string',
+        '};'
+      ].join('\n'),
+      parser: 'babel-eslint'
     }
   ],