Do not use this in functional components

문서 > 코드 분석 > Static Analysis Rules > Do not use this in functional components

이 페이지는 아직 한국어로 제공되지 않으며 번역 작업 중입니다. 번역에 관한 질문이나 의견이 있으시면 언제든지 저희에게 연락해 주십시오.

Metadata

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

Language: JavaScript

Severity: Error

Category: Error Prone

Description

In JavaScript, 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>
    );
}