reactjs - TypeScript - React 上下文不适用于新的 PropTypes 包

标签 reactjs typescript react-proptypes

以下使用 React.PropTypes 的代码工作正常,但它会产生预期的警告(不推荐通过主 React 包访问 PropTypes...):

import * as React from 'react';

export class BackButton extends React.Component<{}, {}> {
    static contextTypes = {
        router: React.PropTypes.object
    };

    render() {
        return (
            <button onClick={this.goBack}>Back</button>
        );
    }

    goBack = () => {
        this.context.router.history.goBack();
    }
}

如果我现在用新的 PropTypes 包替换 React.PropTypes,我会得到一个 TypeError:“Cannot read property 'object' of undefined”:

import * as React from 'react';
import PropTypes from 'prop-types';

export class BackButton extends React.Component<{}, {}> {
    static contextTypes = {
        router: PropTypes.object
    };

    render() {
        return (
            <button onClick={this.goBack}>Back</button>
        );
    }

    goBack = () => {
        this.context.router.history.goBack();
    }
}

我做错了什么?

最佳答案

这不是使用 TypeScript 导入 prop-types 的正确方法。

你必须使用

从“prop-types”导入 * 作为 PropTypes;

代替

从“prop-types”导入 PropTypes;

webpackbin

关于reactjs - TypeScript - React 上下文不适用于新的 PropTypes 包,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45269734/

相关文章:

javascript - 如何在 React v16 中手动调用自定义 PropType 验证器

javascript - 如何在 React 中使用 props 来处理参数?

javascript - 如何使用 MUI React 左对齐 Item1 并右对齐 Item2 和 Item3?

javascript - 如果我需要在 React 组件之后设置 State,如何对服务器的失败响应使用react?

angular - 尝试 *ngFor Json 对象时出错

typescript - 如何在 typescript 元组中使用扩展运算符?

javascript - 将类作为函数参数传递

reactjs - React linter airbnb proptypes 数组

javascript - React js访问另一个类的状态

performance - 如何在 React 中进行组件池?