This repository has been archived by the owner on Aug 18, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 18
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
cartogram
committed
Aug 20, 2018
1 parent
93bd777
commit 952d305
Showing
8 changed files
with
125 additions
and
39 deletions.
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
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,49 @@ | ||
# Disallow multiple render methods in React components. (react-no-multiple-render-methods) | ||
|
||
As a React component grows to render many elements, it is tempting to split the render method into multiple “sub-render” methods. While this may seem like an improvement in readability, the component's state, props, and class methods are still shared, making it difficult to identify which are used by each additional render method. The entire class becomes objectively more complicated, and it would be more effective to break those additional elements into entirely new components instead. | ||
|
||
## Rule Details | ||
|
||
This rule disallows any `renderFoo` methods on a class. | ||
|
||
Examples of **incorrect** code for this rule: | ||
|
||
|
||
```ts | ||
class MyComponent extends React.Component { | ||
renderFoo() { | ||
return ( | ||
<div> | ||
{this.state.bar} | ||
</div> | ||
) | ||
} | ||
render() { | ||
return ( | ||
<div> | ||
{this.renderFoo()} | ||
</div> | ||
) | ||
} | ||
} | ||
``` | ||
|
||
Examples of **correct** code for this rule: | ||
|
||
```ts | ||
import Foo from './components/Foo'; | ||
|
||
class MyComponent extends React.Component { | ||
render() { | ||
return ( | ||
<div> | ||
<Foo bar={this.state.bar} /> | ||
</div> | ||
) | ||
} | ||
} | ||
``` | ||
|
||
## When Not To Use It | ||
|
||
If you do not want to restrict render methods on React class components, you can safely disable this rule. |
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
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,59 @@ | ||
const {RuleTester} = require('eslint'); | ||
const rule = require('../../../lib/rules/react-no-multiple-render-methods'); | ||
|
||
const ruleTester = new RuleTester(); | ||
|
||
require('babel-eslint'); | ||
|
||
const babelParser = 'babel-eslint'; | ||
|
||
function error(memberName) { | ||
return { | ||
type: 'MethodDefinition', | ||
message: `Don’t use multiple render methods in a single component; they generally make your component harder to read. Instead break ${memberName} out into its own component and render it inside this one.`, | ||
}; | ||
} | ||
|
||
ruleTester.run('react-no-multiple-render-methods', rule, { | ||
valid: [ | ||
{ | ||
code: `class Button extends React.Component { | ||
render() {} | ||
}`, | ||
parser: babelParser, | ||
}, | ||
{ | ||
code: `class Button extends React.Component { | ||
otherMethod() {} | ||
render() {} | ||
}`, | ||
parser: babelParser, | ||
}, | ||
], | ||
invalid: [ | ||
{ | ||
code: `class Button extends React.Component { | ||
renderFoo() {} | ||
}`, | ||
parser: babelParser, | ||
errors: [error('renderFoo')], | ||
}, | ||
{ | ||
code: `class Button extends React.Component { | ||
renderFoo() {} | ||
render() {} | ||
}`, | ||
parser: babelParser, | ||
errors: [error('renderFoo')], | ||
}, | ||
{ | ||
code: `class Button extends React.Component { | ||
renderFoo() {} | ||
renderBar() {} | ||
render() {} | ||
}`, | ||
parser: babelParser, | ||
errors: [error('renderFoo'), error('renderBar')], | ||
}, | ||
], | ||
}); |
This file was deleted.
Oops, something went wrong.