javascript - Flow Type高阶组件(HOC)props类型保存

Question

在这个问题上，我把头撞在墙上。我正在尝试将 flowtype 合并到一些 React 项目中。在大多数情况下，打字似乎效果很好。但是，我正在使用一个库 (react-jss)，它使用 HOC 将样式表类注入(inject)到您的组件中。问题是这个模块没有流类型，所以它吹走了我组件上的任何 props 验证，因为我的所有组件都用这个 HOC 包装了。

我已经能够根据我看到的一些 github isuses 添加一些类型，所以至少我知道我正在从 react-jss HOC 取回一个组件，但是这个新组件没有与之关联的 Prop flow 的观点，所以我不会因为未能提供所需的 props 或错误类型的 props 而出错(消除了 flow 的很多好处)。这是我复制粘贴的内容以获得基本的 react-jss HOC 定义:

declare type FunctionComponent<A> = (props: A) => ?React$Element<any>;

declare type ClassComponent<D, A, S> = Class<React$Component<D, A, S>>;

declare type Component<A> = FunctionComponent<A> | ClassComponent<any, A, any>;

declare type Fn1<A, B> = (a: A) => B;

declare type HOC<A, B> = Fn1<Component<A>, Component<B>>;

declare module 'react-jss' {
  declare module.exports: (styleSheet: Object) => HOC<A, B>;
}

请记住 react-jss 默认导出 (injectStyles) 的粗略签名是这样的:

function injectStyles(styleSheet: AnObject)(Component: ReactComponent<Props>): ReactComponent<PropsWithStyleClasses>

Answer 1

你可以试试这些定义:

declare module 'react-jss' {
  // Export these
  declare type FunctionComponent<P> = (props: P) => ?React$Element<any>;
  declare type ClassComponent<D, P, S> = Class<React$Component<D, P, S>>;

  declare type Klasses<CSS> = {
    [classname: $Keys<CSS>]: string,
  };

  declare type JSSProps<CSS> = {
    classes: Klasses<CSS>,
    sheet: {
      attached: boolean,
      classes: Klasses<CSS>,
      deployed: boolean,
      linked: boolean,
      options: Object,
      renderer: mixed,
      rules: mixed,
    },
  };

  declare type Injector = {
    <Props, State, DefaultProps, CSS>(component: ClassComponent<DefaultProps, Props, State>): ClassComponent<DefaultProps, $Diff<Props, JSSProps<CSS>>, void>;
    <Props, CSS>(component: FunctionComponent<Props>): FunctionComponent<$Diff<Props, JSSProps<CSS>>>;
  };

  declare function exports<Props, State, DefaultProps, CSS>(
    CSS: CSS,
  ): Injector
}

请注意，当您导入注入(inject)的组件时，流程会出现一些问题。使用类时一切正常:

// Test.js
class Test extends React.Component<void, { text: string }, void> {
    ...
}
export const StyledTest = injectSheet(style)(Test)

// Main.js
...
render() {
    return <StyledTest /> // ERROR here, missing `text` prop
}

但是对于函数组件，你需要显式地键入:

// Test.js
const Test = (props: { text: string }) => {
    ...
}
export const StyledTest: FunctionComponent<{ text: string }> = injectSheet(style)(Test) // Explicitly type this

// Main.js
...
render() {
     return <StyledTest /> // ERROR here, so it works!
}

我不确定这些问题是否已在流程中得到解决，但此设置对我来说效果很好。