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

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 prop，如果它不存在，否则使用提供的prop。因此，我试图设置高阶分量的返回类型，将className设置为可选的prop。然而，这似乎导致问题，否则Flow不再强制执行所需的道具。有一个更好的方法吗？

Flow文档talks about injecting props，但涉及使用$Diff实用程序类型。我想指出这里的返回类型确实包括className作为可选的prop，使得$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。