流未捕获导入组件的类型错误答案

【问题标题】：Flow is not catching type errors for an imported component流未捕获导入组件的类型错误
【发布时间】：2018-05-01 15:39:43
【问题描述】：

我有一个简单的组件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，流也会捕获错误。

这个问题似乎与导入 React 组件有关，这些组件已经专门使用 flow 进行了类型化。有谁知道我可能做错了什么？

【问题讨论】：

标签： javascript reactjs flowtype typechecking

【解决方案1】：

问题是我的导入是通过与 ErrorBoundary 位于同一目录中的中间 index.js 文件进行的。该 index.js 文件未使用 // @flow 标记进行标记。添加后，类型检查正常工作。

【讨论】：