Question

看看这堂课：

/* @flow */
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';

const mapStateToProps = (state) => ({
    email: ...
});

@connect(mapStateToProps)
class UserControlPanel extends PureComponent {
    static propTypes = {
        email: PropTypes.string
    }
    logout = (ev:any) => {
        ev.preventDefault();

        ...
    }
    render() {
        const { email } = this.props;

        return (
            <div className="ucp">
                ...
            </div>
        );
    }
}

export default UserControlPanel;

这是一个简单的React Component类，它接受名为email的单字符串prop。但是当我运行流程时，它给了我这个错误：

[flow] property email（在React元素UserControlPanel的道具中找不到属性参见：React element UserControlPanel）

我错了什么？我也试过这个：

type Props = {
    email: string;
};

@connect(mapStateToProps)
class UserControlPanel extends PureComponent {
    props:Props
    static propTypes = {
        email: PropTypes.string
    }

或者这个：

type Props = {
    email: string;
};

@connect(mapStateToProps)
class UserControlPanel extends PureComponent<Props> {
    static propTypes = {
        email: PropTypes.string
    }

两者都没有奏效。仅使用Component而不是PureComponent也不起作用。

如何使流程理解我的道具类型而不再出现错误消息？

Answer 1

如果您已使用Flow Type验证类型，则不应使用PropTypes。

相反，请尝试以下方法：

/* @flow */
import * as React from 'react';
import { connect } from 'react-redux';

const mapStateToProps = state => ({
    email: ...
});

type Props = {
  email: string,
};

@connect(mapStateToProps)
export default class UserControlPanel extends React.PureComponent<Props> {
    render() {
        const { email } = this.props;

        return (
            <div className="ucp">
                ...
            </div>
        );
    }
}

Flow不了解proptypes

1 个答案: