Do not use this in functional components

Docs > コード分析 > Static Analysis Rules > Do not use this in functional components

このページは日本語には対応しておりません。随時翻訳に取り組んでいます。翻訳に関してご質問やご意見ございましたら、お気軽にご連絡ください。

Metadata

ID: tsx-react/no-this-in-component

Language: TypeScript

Severity: Error

Category: Error Prone

Description

In TypeScript, particularly in the context of React, the this keyword is not necessary in functional components. Functional components are simpler constructs that are stateless and do not have access to the this keyword. Using this in a functional component is erroneous and leads to bugs in your code.

To adhere to this rule, always refer to props directly in functional components. Instead of using this.props.foo, use props.foo. This ensures that you are accessing the props object directly, rather than trying to access it through this, which is not available in functional components.

Non-Compliant Code Examples

function Test(props) {
    return (
        <div>{this.props.foo}</div>
    );
}

Compliant Code Examples

function Test(props) {
    return (
        <div>{props.foo}</div>
    );
}