Flow 未捕获导入组件的类型错误
Flow is not catching type errors for an imported component
我有一个在另一个组件中使用的简单组件 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
,但当我 运行 流时它报告 "No Errors!"。但是,如果我要从同一个文件导入类型化函数,它就可以工作。或者,如果我尝试在其自己的模块文件中错误地使用 ErrorBoundary
,flow 也会捕获错误。
问题似乎与导入专门使用流输入的 React 组件有关。有谁知道我可能做错了什么?
问题是我的导入是通过与 ErrorBoundary 位于同一目录中的中间 index.js 文件进行的。 index.js 文件没有用 // @flow
标签标记。添加后,类型检查工作正常。
我有一个在另一个组件中使用的简单组件 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
,但当我 运行 流时它报告 "No Errors!"。但是,如果我要从同一个文件导入类型化函数,它就可以工作。或者,如果我尝试在其自己的模块文件中错误地使用 ErrorBoundary
,flow 也会捕获错误。
问题似乎与导入专门使用流输入的 React 组件有关。有谁知道我可能做错了什么?
问题是我的导入是通过与 ErrorBoundary 位于同一目录中的中间 index.js 文件进行的。 index.js 文件没有用 // @flow
标签标记。添加后,类型检查工作正常。