键入没有道具的 React 组件 class 的正确方法是什么？

Question

根据定义，React 项目中的顶级组件不会传递任何 props。 使用 Typescript 时，正确的输入方式是什么？

我最近一直在使用以下 model，但也许有更简单的方法？

interface AppState {
    ...
}
class App extends React.Component<{},AppState> {
    constructor(props: never) {
        super(props);
        this.state = {
            ...
        }
        ...
    }
    ...
}

Answer 1

构造函数主要用于声明您的state或绑定您的 class 方法。 现在，如果省略构造函数，它会被隐式调用，不需要声明。 因此，一旦省略它，您可能会想知道如何绑定或声明 state。

您可以在 state 属性之外声明，同样您可以绑定您的方法，将它们声明为箭头函数：

class App extends React.Component<{},AppState> {
    // state can be declared outside from constructor
    state: AppState = { name: '' }

    // arrow function avoid the need to bind
    onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
      this.setState({name: e.target.value})
    }
}

这样您就可以在使用基于 Class 的组件时编写更清晰的语法。