Question

流程定义

declare type ReactComponent<Props> = Class<React$Component<void, Props, *>> | (props: Props) => React$Element<*>;

标题组件

/* @flow */
import React from 'react';
import Helmet from 'react-helmet';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import styles from './Title.css';

type Props = {
    title: string,
    subTitle?: string,
};

function Title({ title, subTitle }: Props) {
    return (
        <section>
            <Helmet title={title} />
            <h1>{title}</h1>
            {subTitle && <h2>{subTitle}</h2>}
        </section>
    );
}

export default (withStyles(styles)(Title): ReactComponent<Props>);

所以，现在我们有一个标题组件，它带有两个道具，两个字符串，其中一个是可选的。

然后我尝试在另一个组件中使用上面的组件。

/* @flow */
import React from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import styles from './TextureDetail.css';
import Title from '../../Title';

type Props = {
    postData: Map<*, *>,
    postTags: Array<*>,
};

function TextureDetail() {
    return (
        <div>
            <Title />
        </div>
    );
}

export default (withStyles(styles)(TextureDetail): ReactComponent<Props>);

在这种情况下，我希望流程抱怨我使用的组件标题没有所需的道具，但它没有这样做。如何配置实际检查所需类型的流。

Answer 1

这是因为用于从Title创建isometric-style-loader的HOC（高阶组件）没有关联的流类型。 Flow会自动将无类型库转换为any，这就是为什么您没有看到通常希望从缺少必需道具的组件中看到的任何错误。

您可以使用flow-typed存储库中的示例为类型结构化的HOC（例如react-css-modules）创建其类型的绑定。你也可以四处看看是否有其他人已经发布了这个库的流程类型定义，但在回答这个问题时我找不到任何内容。

如何使用Flow来强制执行缺少的prop类型

1 个答案: