javascript - 高阶 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 属性不存在，则高阶组件设置它，否则使用提供的属性。因此，我尝试将高阶组件的返回类型设置为将 className 设置为可选 Prop 。然而，这似乎会导致问题，否则 Flow 不再强制执行其他所需的 Prop 。有更好的方法吗？

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 .