Flow 可以识别未声明的 React 道具吗？

Question

Flow 确保您将所需的道具传递给 React 组件，但是当您发送 extra 道具时，它似乎不会捕获错误。这允许我偶尔犯一些细微的错误，我输入了不正确的道具版本。在下面的示例中，我传入了 prop isloggedin 而不是实际的 prop isLoggedIn，但没有抛出错误，因为我有 isLoggedIn 的默认值。有什么方法可以让 Flow 识别您传入组件中未声明的 prop 的情况？

组件代码：

// @flow

import React, { Component } from "react";

type Props = {
    isLoggedIn: boolean
};

class Donkey extends Component<Props> {
  static defaultProps = {
    isLoggedIn: false,
  }

  render() {
    return (
      <div> {this.props.isLoggedIn.toString()} </div>
    )
  }
}

export default Donkey;

调用代码：

// @flow

import React, { Component } from "react";
import Donkey from "./Donkey";

type Props = {

}

class Main extends Component<Props> {
  render() {
    return (
      <Donkey isloggedin={true} />
    )
  }
}

export default Main;

流量输出：

> flow
No errors!

Answer 1

您可以使用{| ... |} 强制执行精确类型匹配（请参阅https://flow.org/en/docs/types/objects/#toc-exact-object-types）。

Flow 将报告任何缺失或额外的属性。

为什么我们不在任何地方使用它？主要是因为在许多情况下，我们并不关心是否有一些额外的属性。这可能发生在来自 JSON API 的对象，甚至是您自己的组件中，当组件只是将一些属性向下传递给它的子组件时（例如 className）。