Question

我正在尝试使用Flow类型创建一个更高阶的组件，但是在返回的组件类型上遇到麻烦。

最小示例：

/* @flow */

import React from 'react';

type Props = {
  name: string,
  what: number
}

const TestComponent = (props: Props) => null

function withDefaultClassname<Config: {}>(
  Component: React$AbstractComponent<Config, *>
): React$AbstractComponent<{...$Exact<Config>, name: string}, *> {
  return (props) => <Component {...props} className={props.className || 'default'} />;
}
const Wrapped2 = withDefaultClassname(TestComponent)

// $ExpectError - should complain about undefined props
const a = <Wrapped2 />

在上面的示例中，高阶组件将设置className道具（如果不存在），否则使用提供的道具。因此，我尝试将高阶组件的返回类型设置为className作为可选属性。但是，这似乎会引起问题，否则Flow将不再强制执行所需的道具。有更好的方法吗？

Flow文档talks about injecting props，但这涉及使用$Diff实用程序类型。我想指出的是，这里的返回类型确实包含className作为可选属性，这使得$Diff实用程序类型在这种情况下无济于事。

Answer 1

Config & {className?: string}似乎是to works correctly：

function withDefaultClassname<Config: {}>(
      Component: React$AbstractComponent<Config, *>
    ): React$AbstractComponent<Config & {className?: string}, *> {
      return (props) => <Component className={props.className || 'default'} {...props} />;
    }

最好将扩展运算符用于merging exact types。

高阶React组件中可选参数的流类型

1 个答案: