他のコンポーネントで使用されている単純なコンポーネント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コンポーネントをインポートすることとは関係があるようです。誰かが私が間違っていることを知っていますか?