가져온 구성 요소의 흐름에서 형식 오류가 발생하지 않습니다.

Question

다른 구성 요소에서 사용되는 간단한 구성 요소 ErrorBoundary이 있습니다. 두 구성 요소는 모두 흐름에 따라 검사됩니다 (즉, /* @flow */ 플래그가 있음). 그러나 올바른 소품을 제공하지 않아서 ErrorBoundary을 오용하면 오류가 발생하지 않습니다.

/* @flow */ 
import * as React from 'react'; 

type Props = { 
    children: React.Node, 
    ErrorComponent: React.ComponentType<any>, 
}; 

type State = { 
    hasError: boolean, 
}; 

class ErrorBoundary extends React.Component<Props, State> { 
    constructor(props: Props) { 
    super(props); 

    this.state = { hasError: false }; 
    } 

    componentDidCatch(error: Error, info: string) { 
    console.log(error, info); // eslint-disable-line 
    this.setState({ hasError: true }); 
    } 

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

    if (this.state.hasError) { 
     return <ErrorComponent />; 
    } 

    return this.props.children; 
    } 
} 

export default ErrorBoundary; 

를 그리고 여기가 오용되고 : 여기 ErrorBoundary입니다 내가 ErrorComponentErrorBoundary에 필요한 구성 요소를 제공 한 적이 없다는 사실에도 불구하고

/* @flow */ 
import * as React from 'react'; 
import ErrorBoundary from '/path/to/ErrorBoundary'; 

type Props = {}; 

class SomeComponent extends React.Component<Props> { 
    render() { 
    return (
     <ErrorBoundary> 
     {..some markup} 
     </ErrorBoundary> 
    ) 
    } 
} 

, 나는 그것이 "오류를보고하지 흐름을 실행! ". 그러나 동일한 파일에서 형식화 된 함수를 가져 오려면 작동합니다. 또는 자체 모듈 파일 내에 ErrorBoundary을 잘못 사용하려고하면 flow도 오류를 catch합니다.

이 문제는 flow를 사용하여 입력 된 React 구성 요소를 가져 오는 것과 관련이있는 것처럼 보입니다. 아무도 내가 뭘 잘못하고 있을지 알아?

Answer 1

문제는 내 가져 오기가 ErrorBoundary와 같은 디렉토리에있는 중간 index.js 파일을 통해 발생한다는 것입니다. 그 index.js 파일은 // @flow 태그로 표시되지 않았습니다. 일단 내가 그것을 추가, 형식 검사가 제대로 작동했습니다.