javascript - Flow 不理解 proptypes

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 的单个字符串属性。但是当我运行流程时，它给了我这个错误:

[flow] property email (Property not found in props of React element UserControlPanel See also: 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 也不起作用。

如何让 Flow 理解我的 prop 类型并且不再出现错误消息？

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>
        );
    }
}