reactjs – 在TypeScript中定义React组件的contextTypes的正确方法是什么?

如何在TypeScript中定义contextTypes?

我有一个组件(注意:我不确定this question中详述的必要类型的路由器,但这应该与此无关)

export class Repos extends React.Component<ReposProps, {}> {
    context: {
        router: History
    }

    static contextTypes = {
        router: React.PropTypes.object
    };

它有一个功能

    public handleSubmit(event: React.FormEvent) {

在该函数的末尾,它调用上下文

        this.context.router.push(path);
    }

该组件有一个表单

    public render() {
        return (
            {/* ... */}
                <form onSubmit={this.handleSubmit}>
        );
    }
}

但是,与this.context.router.push(路径)一致;我收到错误“Uncaught TypeError:无法读取未定义的属性’路由器’”编译同样的代码时,我在路由器中使用Repos的文件中收到了TypeScript错误:

ERROR in ./index.tsx
(14,34): error TS2322: Type 'typeof Repos' is not assignable to type 'string | ComponentClass<any> | StatelessComponent<
any>'.
  Type 'typeof Repos' is not assignable to type 'StatelessComponent<any>'.
    Types of property 'contextTypes' are incompatible.
      Type '{ router: Requireable<any>; }' is not assignable to type 'ValidationMap<any>'.

将contextTypes更改为

static contextTypes: React.ValidationMap<any> = {
    router: React.PropTypes.object
};

修复了TypeScript错误,虽然我怀疑这是必要的;我怀疑是一个不同的问题导致这两个问题.

根据TypeScript issue 4785: How to use React contextTypes in Typescript 1.6?的讨论,上面的代码是正确的.如果有帮助,我使用的是TypeScript 1.7.3,React 0.14.7和react-router 2.0.0.

最佳答案
我们在职业生涯中曾经一度看到过这个问题.令人惊讶的是,我没有抓住这一点.

问题是handleSubmit()中的this的上下文是不同的,因为handleSubmit的调用方式如何.将handleSubmit更改为胖箭头定义的工作原理如下:

public handleSubmit = (event: React.FormEvent) => {

在这种特殊情况下,我忽略了这一点,因为我不经常在TypeScript世界中遇到这个问题(我也经常不使用DOM元素,并且在一周内使用React ……没有任何借口,我知道)

转载注明原文:reactjs – 在TypeScript中定义React组件的contextTypes的正确方法是什么? - 代码日志