Question

Flow确保您将所需的道具传递给React Components，但是当您发送额外的道具时，它似乎没有捕获错误。这允许我偶尔制作的细微错误，我输入一个不正确的道具版本。在下面的示例中，我传递了道具isloggedin而不是实际道具isLoggedIn，但没有引发任何错误，因为我有isLoggedIn的默认值。有没有办法让Flow识别你传入未在组件中声明的道具的情况？

组件代码：

// @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），就会发生这种情况。

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

1 个答案: