フローは

Question

ルック、このクラスでproptypesを理解していない：

/* @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; 

それは簡単には単一の文字列が指定された電子メールを支える受け入れComponentクラスを反応させるのです。しかし、フローを実行すると、このエラーが表示されます。

[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> { 
    static propTypes = { 
     email: PropTypes.string 
    } 

：

type Props = { 
    email: string; 
}; 

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

またはこの：私もこれを試してみました。 PureComponentの代わりにComponentだけを使用しても機能しません。

私の小道具の種類を理解し、エラーメッセージを表示させないようにするにはどうすればよいですか？

Answer 1

すでにフロータイプを使用して型を検証している場合は、PropTypeを使用しないでください。

は代わりに、次のことを試してください。

/* @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> 
     ); 
    } 
}