diff --git a/lib/util/Components.js b/lib/util/Components.js index b112923f63..af00d82bd1 100644 --- a/lib/util/Components.js +++ b/lib/util/Components.js @@ -109,7 +109,7 @@ class Components { set(node, props) { const list = Lists.get(this); let component = list[getId(node)]; - while (!component) { + while (!component || component.confidence < 1) { node = node.parent; if (!node) { return; @@ -477,7 +477,6 @@ function componentRule(rule, context) { } if (node.type === 'FunctionExpression' || node.type === 'ArrowFunctionExpression') { - const isMethod = parent.type === 'Property' && parent.method; const isPropertyAssignment = parent.type === 'AssignmentExpression' && parent.left.type === 'MemberExpression'; const isModuleExportsAssignment = isPropertyAssignment @@ -562,6 +561,22 @@ function componentRule(rule, context) { return undefined; } + // case: { f() { return ... } } + if (node.parent.type === 'Property' && node.parent.method && !node.parent.computed) { + if (!isFirstLetterCapitalized(node.parent.key.name)) { + return undefined; + } + return utils.isReturningJSX(node) ? node : undefined; + } + + // case: { f: () => ... } + if (node.parent.type === 'Property' && !node.id && !node.parent.computed) { + if (!isFirstLetterCapitalized(node.parent.key.name)) { + return undefined; + } + return utils.isReturningJSX(node) ? node : undefined; + } + // Case like `React.memo(() => <>)` or `React.forwardRef(...)` const pragmaComponentWrapper = utils.getPragmaComponentWrapper(node); if (pragmaComponentWrapper && utils.isReturningJSXOrNull(node)) { @@ -576,10 +591,6 @@ function componentRule(rule, context) { return undefined; } - if (isMethod && !isFirstLetterCapitalized(node.parent.key.name)) { - return utils.isReturningJSX(node) ? node : undefined; - } - if (node.id) { return isFirstLetterCapitalized(node.id.name) ? node : undefined; } @@ -853,13 +864,8 @@ function componentRule(rule, context) { return; } - const component = utils.getParentComponent(); - if ( - !component - || (component.parent && component.parent.type === 'JSXExpressionContainer') - ) { - // Ban the node if we cannot find a parent component - components.add(node, 0); + const component = utils.getStatelessComponent(node); + if (!component) { return; } components.add(component, 2); @@ -871,7 +877,7 @@ function componentRule(rule, context) { return; } - node = utils.getParentComponent(); + node = utils.getStatelessComponent(node); if (!node) { return; } @@ -884,13 +890,8 @@ function componentRule(rule, context) { return; } - const component = utils.getParentComponent(); - if ( - !component - || (component.parent && component.parent.type === 'JSXExpressionContainer') - ) { - // Ban the node if we cannot find a parent component - components.add(node, 0); + const component = utils.getStatelessComponent(node); + if (!component) { return; } components.add(component, 2); diff --git a/tests/lib/rules/destructuring-assignment.js b/tests/lib/rules/destructuring-assignment.js index 4af2341169..738a9800ec 100644 --- a/tests/lib/rules/destructuring-assignment.js +++ b/tests/lib/rules/destructuring-assignment.js @@ -459,7 +459,7 @@ ruleTester.run('destructuring-assignment', rule, { }, { code: ` - var Hello = React.createClass({ + var Hello = createReactClass({ render: function() { return {this.props.foo}; }