Do not use this in functional components

문서 > Datadog 보안 > Code Security > Static Code Analysis (SAST) > SAST 규칙 > 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>
    );
}