我有一个简单的组件ErrorBoundary
,它在另一个组件中使用。这两个组件都通过流进行检查(即它们具有 /* @flow */
标志)。但是,如果我通过不提供正确的 props 来滥用 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;
这里它被滥用了:
/* @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 组件有关。有谁知道我可能做错了什么?
最佳答案
问题是我的导入是通过与 ErrorBoundary 位于同一目录中的中间 index.js 文件进行的。该index.js 文件尚未使用 //@flow
标记进行标记。添加后,类型检查就正常工作了。
关于javascript - Flow 未捕获导入组件的类型错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47357799/