What version of Oxlint are you using?
1.58.0
What command did you run?
oxlint -c oxlint.json test.tsx
What does your .oxlintrc.json (or oxlint.config.ts) config file look like?
What happened?
react/no-this-in-sfc flags any this expression inside a functional component, including this passed as an argument
to .bind(). ESLint only flags this used as a member expression base (e.g., this.props, this.state).
Minimal reproduction (playground)
test.tsx:
function reopen(q: string) {
console.log(q)
}
// Case 1: this.props -- should be flagged
const Bad = (props: {bar: string}) => {
return <div>{this.props.bar}</div>
}
// Case 2: .bind(this) -- should NOT be flagged
const Good = ({query}: {query: string}) => {
return <div onClick={reopen.bind(this, query)}>click</div>
}
Expected: Only case 1 (this.props.bar) is flagged.
Actual: Both cases are flagged:
x eslint-plugin-react(no-this-in-sfc): Stateless functional components should not use `this`
,-[test.tsx:7:15]
6 | const Bad = (props: {bar: string}) => {
7 | return <div>{this.props.bar}</div>
: ^^^^
x eslint-plugin-react(no-this-in-sfc): Stateless functional components should not use `this`
,-[test.tsx:12:35]
11 | const Good = ({query}: {query: string}) => {
12 | return <div onClick={reopen.bind(this, query)}>click</div>
: ^^^^
ESLint comparison
Both ESLint 7.23.0 and ESLint 10.1.0 (with eslint-plugin-react@7.37.5) only flag case 1 (this.props.bar), not case 2
(.bind(this)).
What version of Oxlint are you using?
1.58.0
What command did you run?
oxlint -c oxlint.json test.tsx
What does your
.oxlintrc.json(oroxlint.config.ts) config file look like?{ "plugins": ["react"], "rules": { "react/no-this-in-sfc": "error" } }What happened?
react/no-this-in-sfcflags anythisexpression inside a functional component, includingthispassed as an argumentto
.bind(). ESLint only flagsthisused as a member expression base (e.g.,this.props,this.state).Minimal reproduction (playground)
test.tsx:Expected: Only case 1 (
this.props.bar) is flagged.Actual: Both cases are flagged:
ESLint comparison
Both ESLint 7.23.0 and ESLint 10.1.0 (with
eslint-plugin-react@7.37.5) only flag case 1 (this.props.bar), not case 2(
.bind(this)).