如何为 React 类组件声明附加属性？

Question

我用 TypeScript 重写了我的 React 项目。现在我知道如何为类组件声明属性接口和状态接口了，简单如下：

export interface ComponentProps {
    propName: string
}

interface ComponentState {
    stateName: number
}

class myComponent extends React.Component<ComponentProps, ComponentState> {
...
}

但是当我在 componentDidMount() 生命周期中执行某些操作时会出现错误：

componentDidMount() {
    this.customProperty = 26;  // here I could save an id returned by setInterval to cancel it in the componentWillUnmount() for example.
}

[ts] 类型“MyComponent”上不存在属性“customProperty”。 [2339] 我可以做些什么来正确声明附加属性，而不仅仅是简单地消除错误。

我已经学习了打字稿的基础知识。

import React, { Component } from 'react';

export interface CheckoutProps {
    total: number;
    customer: string;
}

interface State {
    isChecking: boolean;
}

class Checkout extends Component<CheckoutProps, State> {
    state = {
        isChecking: false
    };

    componentDidMount() {
    this.customProperty = 'sean';
    }

    render() {
        return <div>hello</div>;
    }
}

export default Checkout;

Answer 1

类级别的属性可以在类声明之后定义，

它们可以在声明时初始化，也可以在构造函数中初始化。

将您的班级更改为：-

class Checkout extends Component<CheckoutProps, State> {
    customProperty:string=''; //Here,you can define your class level properties

    state = {
        isChecking: false
    };

    componentDidMount() {
    this.customProperty = 'sean';
    }

    render() {
        return <div>hello</div>;
    }
}

希望对你有帮助，

干杯！！

Answer 2

你可以在类中声明它：

class myComponent extends React.Component<ComponentProps, ComponentState> {
     private customProperty: string = '';

     componentDidMount() {
        this.customProperty = 'sean';
     }
}