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!
を使用して、正確な型マッチングを実施できます{| ... |}
(https://flow.org/en/docs/types/objects/#toc-exact-object-typesを参照)。
その後、フローは欠落または追加のプロパティを報告します。
なぜそれをどこにも使わないのですか?多くの場合、追加のプロパティがあるかどうかは気にしないためです。これは、JSON APIからのオブジェクト、またはコンポーネントがその子にいくつかのプロパティを渡しているだけの場合に発生する可能性があります(例className
)。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加