Question

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

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';
     }
}

如何为React类组件声明其他属性？

2 个答案: