-
-
Notifications
You must be signed in to change notification settings - Fork 2.8k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add new rule for preventing
this
in SFCs
This rule will report errors when a stateless functional component is attempting to use `this`.
- Loading branch information
Showing
6 changed files
with
219 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,61 @@ | ||
# Prevent `this` from being used in stateless functional components (react/no-this-in-sfc) | ||
|
||
When using a stateless functional component (SFC), props/context aren't accessed in the same way as a class component or the `create-react-class` format. Both props and context are passed as separate arguments to the component instead. Also, as the name suggests, a stateless component does not have state on `this.state`. | ||
|
||
Attempting to access properties on `this` can be a potential error if someone is unaware of the differences when writing a SFC or missed when converting a class component to a SFC. | ||
|
||
|
||
## Rule Details | ||
|
||
The following patterns are considered warnings: | ||
|
||
```jsx | ||
function Foo(props) { | ||
return ( | ||
<div>{this.props.bar}</div> | ||
); | ||
} | ||
``` | ||
|
||
```jsx | ||
function Foo(props, context) { | ||
return ( | ||
<div> | ||
{this.context.foo ? this.props.bar : ''} | ||
</div> | ||
); | ||
} | ||
``` | ||
|
||
```jsx | ||
function Foo(props) { | ||
if (this.state.loading) { | ||
return <Loader />; | ||
} | ||
return ( | ||
<div> | ||
{this.props.bar} | ||
</div> | ||
); | ||
} | ||
``` | ||
|
||
The following patterns are **not** considered warnings: | ||
|
||
```jsx | ||
function Foo(props) { | ||
return ( | ||
<div>{props.bar}</div> | ||
); | ||
} | ||
``` | ||
|
||
```jsx | ||
function Foo(props, context) { | ||
return ( | ||
<div> | ||
{context.foo ? props.bar : ''} | ||
</div> | ||
); | ||
} | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
/** | ||
* @fileoverview Report "this" being used in stateless functional components. | ||
*/ | ||
'use strict'; | ||
|
||
const Components = require('../util/Components'); | ||
|
||
// ------------------------------------------------------------------------------ | ||
// Constants | ||
// ------------------------------------------------------------------------------ | ||
|
||
const ERROR_MESSAGE = 'Stateless functional components should not use this'; | ||
|
||
// ------------------------------------------------------------------------------ | ||
// Rule Definition | ||
// ------------------------------------------------------------------------------ | ||
|
||
module.exports = { | ||
meta: { | ||
docs: { | ||
description: 'Report "this" being used in stateless components', | ||
category: 'Possible Errors', | ||
recommended: false | ||
}, | ||
schema: [] | ||
}, | ||
|
||
create: Components.detect((context, components, utils) => ({ | ||
MemberExpression(node) { | ||
const component = components.get(utils.getParentStatelessComponent()); | ||
if (!component) { | ||
return; | ||
} | ||
if (node.object.type === 'ThisExpression') { | ||
context.report({ | ||
node: node, | ||
message: ERROR_MESSAGE | ||
}); | ||
} | ||
} | ||
})) | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,106 @@ | ||
/** | ||
* @fileoverview Report "this" being used in stateless functional components. | ||
*/ | ||
'use strict'; | ||
|
||
// ------------------------------------------------------------------------------ | ||
// Constants | ||
// ------------------------------------------------------------------------------ | ||
|
||
const ERROR_MESSAGE = 'Stateless functional components should not use this'; | ||
|
||
// ------------------------------------------------------------------------------ | ||
// Requirements | ||
// ------------------------------------------------------------------------------ | ||
|
||
const rule = require('../../../lib/rules/no-this-in-sfc'); | ||
const RuleTester = require('eslint').RuleTester; | ||
|
||
const parserOptions = { | ||
ecmaVersion: 8, | ||
sourceType: 'module', | ||
ecmaFeatures: { | ||
experimentalObjectRestSpread: true, | ||
jsx: true | ||
} | ||
}; | ||
|
||
const ruleTester = new RuleTester({parserOptions}); | ||
ruleTester.run('no-this-in-sfc', rule, { | ||
valid: [{ | ||
code: ` | ||
function Foo(props) { | ||
const { foo } = props; | ||
return <div bar={foo} />; | ||
}` | ||
}, { | ||
code: ` | ||
class Foo extends React.Component { | ||
render() { | ||
const { foo } = this.props; | ||
return <div bar={foo} />; | ||
} | ||
}` | ||
}, { | ||
code: ` | ||
const Foo = createReactClass({ | ||
render: function() { | ||
return <div>{this.props.foo}</div>; | ||
} | ||
});` | ||
}, { | ||
code: ` | ||
const Foo = React.createClass({ | ||
render: function() { | ||
return <div>{this.props.foo}</div>; | ||
} | ||
});`, | ||
settings: {react: {createClass: 'createClass'}} | ||
}, { | ||
code: ` | ||
function Foo (bar) { | ||
this.bar = bar; | ||
this.props = 'baz'; | ||
this.getFoo = function() { | ||
return this.bar + this.props; | ||
} | ||
} | ||
` | ||
}], | ||
invalid: [{ | ||
code: ` | ||
function Foo(props) { | ||
const { foo } = this.props; | ||
return <div>{foo}</div>; | ||
}`, | ||
errors: [{message: ERROR_MESSAGE}] | ||
}, { | ||
code: ` | ||
function Foo(props) { | ||
return <div>{this.props.foo}</div>; | ||
}`, | ||
errors: [{message: ERROR_MESSAGE}] | ||
}, { | ||
code: ` | ||
function Foo(props) { | ||
return <div>{this.state.foo}</div>; | ||
}`, | ||
errors: [{message: ERROR_MESSAGE}] | ||
}, { | ||
code: ` | ||
function Foo(props) { | ||
const { foo } = this.state; | ||
return <div>{foo}</div>; | ||
}`, | ||
errors: [{message: ERROR_MESSAGE}] | ||
}, { | ||
code: ` | ||
function Foo(props) { | ||
function onClick(bar) { | ||
this.props.onClick(); | ||
} | ||
return <div onClick={onClick}>{this.props.foo}</div>; | ||
}`, | ||
errors: [{message: ERROR_MESSAGE}, {message: ERROR_MESSAGE}] | ||
}] | ||
}); |