Question

所以我有一组基础组件，其prop类型设置为：

type SomeProps = {
  // ... arbitrary prop types
  theme: {
    wrapper: string,
    button: string,
    // these are also kind of arbitrary
  }
}

现在我有一个HOC会注入theme道具，因此这个新创建的组件的用户不必通过theme支柱。测试表明，下面的代码不会起作用（合并相同字段的类型）......

type A = { foo: number };
type B = A & { foo?: number };
const x: B = { foo: 2 };

无论如何，我编写了HOC，但我不确定流程类型在我描述的场景中是否有效。作为附加要求，新创建的组件仍然可以传递theme道具，该道具应该与注入的theme合并。这是HOC的代码：

// @flow

import withProps from 'recompose/withProps';
import setDisplayName from 'recompose/setDisplayName';
import wrapDisplayName from 'recompose/wrapDisplayName';
import classnames from 'classnames';

type FunctionComponent<P> = (props: P) => ?React$Element<any>;
type ClassComponent<D, P, S> = Class<React$Component<D, P, S>>;
type Component<P> = FunctionComponent<P> | ClassComponent<any, P, any>;

type ThemeType = { [className: string]: string };
type OptionalThemePropType = {
    [prop: string]: mixed,
    theme?: ThemeType
}

function mergeTheme<T, U: T & { theme: ThemeType }>(
    injectedTheme: ThemeType
): (BaseComponent: Component<T>) => Component<U> {
    return BaseComponent => {
        const Themed: Component<U> = withProps((ownProps: OptionalThemePropType) => {
            let theme: ThemeType = injectedTheme;
            if (ownProps && ownProps.theme) {
                const ownTheme: ThemeType = ownProps.theme;
                theme = Object
                    .keys(ownTheme)
                    .filter((key: string) => !!injectedTheme[key])
                    .reduce(
                        (accum: ThemeType, key: string) => {
                            accum[key] = classnames(ownTheme[key], injectedTheme[key]);
                            return accum;
                        },
                        { ...ownTheme, ...injectedTheme }
                    );
            }
            return { theme };
        })(BaseComponent);
        setDisplayName(wrapDisplayName(BaseComponent, 'themed'))(Themed);
        return Themed;
    };
}

这是对的吗？

Answer 1

我们的想法是使用$Diff flowtype helper从Component Props中删除注入的道具。

带有@ expo / ex-navigation包的导航

的示例

declare type FunctionComponent<P> = (props: P) => ?React$Element<any>;
  declare type ClassComponent<D, P, S> = Class<React$Component<D, P, S>>;
  declare type Component<P> = FunctionComponent<P> | ClassComponent<any, P, any>;

  declare type ExNavProps = {
    navigation: NavigationContext,
    navigator: ExNavigatorContext,
  };

  declare type WithNavigationOptions = {
    withRef: boolean,
  };

  // withNavigation should add navigator and navigation as defaultprops for WrappedComponent
  declare function withNavigation<DefaultProps, Props, State>(
    WrappedComponent: ClassComponent<DefaultProps, Props, State>,
    options?: WithNavigationOptions,
  ): ClassComponent<DefaultProps & ExNavProps, $Diff<Props, ExNavProps>, State>;

但是您仍需要在组件中定义ExNavProps，例如

输入Props = { firstProp：string， }＆amp; ExNavProps

export default class MyComponent extends React<void, Props, void>

为注入道具的HOC定义正确的类型

1 个答案: