Reactjs 发现 React 组件类的 `interface` 问题，因为类型 'Readonly<{}>`

问题描述

我相信我已经用正确的方式声明了 interface 并用类实现了。但仍然收到错误：

Property 'show' does not exist on type 'Readonly<{}>'.ts(2339)

有人帮我进一步理解吗？

这是我的代码：

interface GlobalForm {
    show:boolean
}

export class Footer extends React.Component<GlobalForm> {

    constructor(props:GlobalForm){
        super(props);
        this.state = {
            show:false
        }
    }
    
    globalForm = (event:React.MouseEvent):void => {
        event.preventDefault();
        this.setState(() => ({show:!this.state.show}))
    }

错误：

解决方法

将您的类声明更改为：

export class Footer extends React.Component<{},GlobalForm> { ...

状态类型应该在第二个参数中

,

React.Component 是一种泛型类型（又名 React.Component<PropType,StateType>），因此您希望为其提供（可选）prop 和 state 类型参数。

It should be `React.Component<{},GlobalForm>` in your case.