[Fix] forbid-component-props: Implemented support for "namespaced" …

…components

Fixes #2766.

CHANGELOG.md

@@ -11,8 +11,10 @@ This change log adheres to standards from [Keep a CHANGELOG](http://keepachangel
 
 ### Fixed
 * [`function-component-definition`]: ignore object properties ([#2771][] @stefan-wullems)
+* [`forbid-component-props`]: Implemented support for "namespaced" components ([#2767][] @mnn)
 
 [#2771]: https://github.com/yannickcr/eslint-plugin-react/pull/2771
+[#2767]: https://github.com/yannickcr/eslint-plugin-react/pull/2767
 [#2761]: https://github.com/yannickcr/eslint-plugin-react/pull/2761
 [#2748]: https://github.com/yannickcr/eslint-plugin-react/pull/2748
 

lib/rules/forbid-component-props.js

@@ -78,8 +78,11 @@ module.exports = {
 
     return {
       JSXAttribute(node) {
-        const tag = node.parent.name.name;
-        if (tag && tag[0] !== tag[0].toUpperCase()) {
+        const parentName = node.parent.name;
+          // Extract a component name when using a "namespace", e.g. `<AntdLayout.Content />`.
+        const tag = parentName.name || `${parentName.object.name}.${parentName.property.name}`;
+        const componentName = parentName.name || parentName.property.name;
+        if (componentName && componentName[0] !== componentName[0].toUpperCase()) {
           // This is a DOM node, not a Component, so exit.
           return;
         }

tests/lib/rules/forbid-component-props.js

@@ -104,6 +104,16 @@ ruleTester.run('forbid-component-props', rule, {
     options: [{
       forbid: [{propName: 'className', allowedFor: ['ReactModal']}]
     }]
+  }, {
+    code: 'const item = (<AntdLayout.Content className="antdFoo" />);',
+    options: [{
+      forbid: [{propName: 'className', allowedFor: ['AntdLayout.Content']}]
+    }]
+  }, {
+    code: 'const item = (<this.ReactModal className="foo" />);',
+    options: [{
+      forbid: [{propName: 'className', allowedFor: ['this.ReactModal']}]
+    }]
   }],
 
   invalid: [{