Declaring only one component per file improves readability and reusability of components.
Examples of incorrect code for this rule:
var Hello = createClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
var HelloJohn = createClass({
render: function() {
return <Hello name="John" />;
}
});
Examples of correct code for this rule:
var Hello = require('./components/Hello');
var HelloJohn = createClass({
render: function() {
return <Hello name="John" />;
}
});
...
"inferno/no-multi-comp": [<enabled>, { "ignoreStateless": <boolean> }]
...
When true
the rule will ignore stateless components and will allow you to have multiple stateless components, or one stateful component and some stateless components in the same file.
Examples of correct code for this rule:
function Hello(props) {
return <div>Hello {props.name}</div>;
}
function HelloAgain(props) {
return <div>Hello again {props.name}</div>;
}
function Hello(props) {
return <div>Hello {props.name}</div>;
}
class HelloJohn extends Inferno.Component {
render() {
return <Hello name="John" />;
}
}
module.exports = HelloJohn;
If you prefer to declare multiple components per file you can disable this rule.