Fix jsx-uses-var to handle nested object properties

Author: yayalice

lib/rules/jsx-uses-vars.js

@@ -38,9 +38,13 @@ module.exports = {
         } else if (node.name.name) {
           // <Foo>
           name = node.name.name;
-        } else if (node.name.object && node.name.object.name) {
-          // <Foo.Bar> - node.name.object.name
-          name = node.name.object.name;
+        } else if (node.name.object) {
+          // <Foo...Bar>
+          var parent = node.name.object;
+          while (parent.object) {
+            parent = parent.object;
+          }
+          name = parent.name;
         } else {
           return;
         }

tests/lib/rules/jsx-uses-vars.js

@@ -97,6 +97,26 @@ ruleTester.run('no-unused-vars', rule, {
         }\
         <HelloMessage />',
       parserOptions: parserOptions
+    }, {
+      code: '\
+        /*eslint jsx-uses-vars:1*/\
+        function foo() {\
+          var App = { Foo: { Bar: {}}};\
+          var bar = React.render(<App.Foo.Bar/>);\
+          return bar;\
+        };\
+        foo()',
+      parserOptions: parserOptions
+    }, {
+      code: '\
+        /*eslint jsx-uses-vars:1*/\
+        function foo() {\
+          var App = { Foo: { Bar: { Baz: {}}}};\
+          var bar = React.render(<App.Foo.Bar.Baz/>);\
+          return bar;\
+        };\
+        foo()',
+      parserOptions: parserOptions
     }
   ],
   invalid: [