2017-11-17 13 views
1

他のコンポーネントで使用されている単純なコンポーネントErrorBoundaryがあります。両方のコンポーネントはフローによってチェックされます(つまり、フラグは/* @flow */です)。しかし、私が正しい小道具を提供しないことによってErrorBoundaryを悪用すれば、流れはエラーを捕まえていません。ここ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; 

そして、ここでは誤用されている:

/* @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に必要なコンポーネントErrorComponentを提供していませんでしたという事実にもかかわらず、私はフローを実行すると、それは「いいえエラーを報告しません! "しかし、同じファイルから型付き関数をインポートすると、それは機能します。または、自分自身のモジュールファイル内でErrorBoundaryを間違って使用しようとすると、flowもエラーをキャッチします。

問題は、フローを使用して入力されたReactコンポーネントをインポートすることとは関係があるようです。誰かが私が間違っていることを知っていますか?

答えて

0

問題は、私のインポートがErrorBoundaryと同じディレクトリにある中間のindex.jsファイルを介して行われることでした。そのindex.jsファイルに// @flowタグが付いていませんでした。私がそれを追加すると、型チェックが正しく機能しました。

関連する問題