diff --git a/lib/rules/no-this-in-sfc.js b/lib/rules/no-this-in-sfc.js
index 3883a36d69..accf63d244 100644
--- a/lib/rules/no-this-in-sfc.js
+++ b/lib/rules/no-this-in-sfc.js
@@ -27,18 +27,33 @@ module.exports = {
schema: []
},
- create: Components.detect((context, components, utils) => ({
- MemberExpression(node) {
- const component = components.get(utils.getParentStatelessComponent());
- if (!component) {
- return;
+ create: Components.detect((context, components, utils) => {
+ let hasReactImport = false;
+ return {
+ ImportDeclaration(node) {
+ if (hasReactImport) {
+ return;
+ }
+ const isReactImport = node.source.value === 'react';
+ if (isReactImport) {
+ hasReactImport = true;
+ }
+ },
+ MemberExpression(node) {
+ if (!hasReactImport) {
+ return;
+ }
+ const component = components.get(utils.getParentStatelessComponent());
+ if (!component) {
+ return;
+ }
+ if (node.object.type === 'ThisExpression') {
+ context.report({
+ node: node,
+ message: ERROR_MESSAGE
+ });
+ }
}
- if (node.object.type === 'ThisExpression') {
- context.report({
- node: node,
- message: ERROR_MESSAGE
- });
- }
- }
- }))
+ };
+ })
};
diff --git a/tests/lib/rules/no-this-in-sfc.js b/tests/lib/rules/no-this-in-sfc.js
index 026b44dc1a..7082a8869e 100644
--- a/tests/lib/rules/no-this-in-sfc.js
+++ b/tests/lib/rules/no-this-in-sfc.js
@@ -28,17 +28,20 @@ const ruleTester = new RuleTester({parserOptions});
ruleTester.run('no-this-in-sfc', rule, {
valid: [{
code: `
+ import React from 'react';
function Foo(props) {
const { foo } = props;
return
;
}`
}, {
code: `
+ import React from 'react';
function Foo({ foo }) {
return ;
}`
}, {
code: `
+ import React from 'react';
class Foo extends React.Component {
render() {
const { foo } = this.props;
@@ -47,6 +50,7 @@ ruleTester.run('no-this-in-sfc', rule, {
}`
}, {
code: `
+ import React from 'react';
const Foo = createReactClass({
render: function() {
return {this.props.foo}
;
@@ -54,6 +58,7 @@ ruleTester.run('no-this-in-sfc', rule, {
});`
}, {
code: `
+ import React from 'react';
const Foo = React.createClass({
render: function() {
return {this.props.foo}
;
@@ -72,11 +77,13 @@ ruleTester.run('no-this-in-sfc', rule, {
`
}, {
code: `
+ import React from 'react';
function Foo(props) {
return props.foo ? {props.bar} : null;
}`
}, {
code: `
+ import React from 'react';
function Foo(props) {
if (props.foo) {
return {props.bar}
;
@@ -92,16 +99,43 @@ ruleTester.run('no-this-in-sfc', rule, {
return null;
}`
}, {
- code: 'const Foo = (props) => {props.foo}'
+ code: `
+ import React from 'react';
+ const Foo = (props) => {props.foo}`
+ }, {
+ code: `
+ import React from 'react';
+ const Foo = ({ foo }) => {foo}`
}, {
- code: 'const Foo = ({ foo }) => {foo}'
+ code: `
+ import React from 'react';
+ const Foo = (props) => props.foo ? {props.bar} : null;`
}, {
- code: 'const Foo = (props) => props.foo ? {props.bar} : null;'
+ code: `
+ import React from 'react';
+ const Foo = ({ foo, bar }) => foo ? {bar} : null;`
+ }, {
+ code: `
+ function Foo(props) {
+ if (this.props.foo) {
+ something();
+ }
+ return null;
+ }`
}, {
- code: 'const Foo = ({ foo, bar }) => foo ? {bar} : null;'
+ code: `
+ class Foo {
+ bar() {
+ return () => {
+ this.reset();
+ return null;
+ };
+ }
+ }`
}],
invalid: [{
code: `
+ import React from 'react';
function Foo(props) {
const { foo } = this.props;
return {foo}
;
@@ -109,18 +143,21 @@ ruleTester.run('no-this-in-sfc', rule, {
errors: [{message: ERROR_MESSAGE}]
}, {
code: `
+ import React from 'react';
function Foo(props) {
return {this.props.foo}
;
}`,
errors: [{message: ERROR_MESSAGE}]
}, {
code: `
+ import React from 'react';
function Foo(props) {
return {this.state.foo}
;
}`,
errors: [{message: ERROR_MESSAGE}]
}, {
code: `
+ import React from 'react';
function Foo(props) {
const { foo } = this.state;
return {foo}
;
@@ -128,12 +165,14 @@ ruleTester.run('no-this-in-sfc', rule, {
errors: [{message: ERROR_MESSAGE}]
}, {
code: `
+ import React from 'react';
function Foo(props) {
return props.foo ? {this.props.bar}
: null;
}`,
errors: [{message: ERROR_MESSAGE}]
}, {
code: `
+ import React from 'react';
function Foo(props) {
if (props.foo) {
return {this.props.bar}
;
@@ -143,21 +182,17 @@ ruleTester.run('no-this-in-sfc', rule, {
errors: [{message: ERROR_MESSAGE}]
}, {
code: `
- function Foo(props) {
- if (this.props.foo) {
- something();
- }
- return null;
- }`,
+ import React from 'react';
+ const Foo = (props) => {this.props.foo}`,
errors: [{message: ERROR_MESSAGE}]
}, {
- code: 'const Foo = (props) => {this.props.foo}',
- errors: [{message: ERROR_MESSAGE}]
- }, {
- code: 'const Foo = (props) => this.props.foo ? {props.bar} : null;',
+ code: `
+ import React from 'react';
+ const Foo = (props) => this.props.foo ? {props.bar} : null;`,
errors: [{message: ERROR_MESSAGE}]
}, {
code: `
+ import React from 'react';
function Foo(props) {
function onClick(bar) {
this.props.onClick();