时间戳

首页 > 解决方案 > 键入没有道具的 React 组件类的正确方法是什么？

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

问题描述

根据定义，React 项目中的顶级组件不会有任何 props 传递给它。使用 Typescript 时输入此内容的适当方法是什么？

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

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

标签： reactjstypescript

解决方案

构造函数主要用于声明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})
    }
}

这样，您可以在使用基于类的组件时编写更简洁的语法。

推荐阅读