흐름

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

또는이 : 모두 작동하지 않습니다

type Props = { 
    email: string; 
}; 

@connect(mapStateToProps) 
class UserControlPanel extends PureComponent<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> 
     ); 
    } 
}