Материал пользовательского интерфейса, при необходимости подключен редуктор generi c высшего порядка (HO C), реагирует на машинопись - PullRequest
Новая
       35

Материал пользовательского интерфейса, при необходимости подключен редуктор generi c высшего порядка (HO C), реагирует на машинопись

0 голосов
/ 21 апреля 2020

Я пытаюсь создать какой-то HO C для некоторых компонентов, которые у меня есть. и он должен быть очень универсальным / универсальным для различных сценариев ios. например, withData может использоваться в нескольких различных компонентах.

в настоящее время пример компонента connected / withStyles. 

export const ConnectedComponentWithStyles = connect(
  mapStateToProps,
  mapDispatchToProps
)(withStyles(useStyles)(MyComponent));
  • Создаваемые мной HOC могут быть одновременно компонентами класса как функциональный компонент.
  • Компонент может иметь или не иметь withStyles HO C из пользовательского интерфейса.
  • Компонент может иметь или не иметь connect от Redux.
  • Компонент может иметь или не иметь withRoute из react-router-dom

Я мог бы найти решения отдельно для material-ui или redux или без них, но не для разных комбинированных сценариев ios.

например, только со стилями 


  type WrapperProps = WithStyles<typeof styles>;

  const withStyles = <P extends {}>(Component: React.ComponentType<P>) => {
    type Props = P & WrapperProps;

    return (props: Props) => {
      return (
          <Component {...props} />
      );
    };
  };

или простой компонент 

export const withData = function<P extends any>(
    WrappedComponent: new () => React.Component<P, any>
) {
    return class MyHOC extends React.Component<P, any> {
        render() {
            return (
                <WrappedComponent {...this.props}/>
            );
        }
    }
}

пример ошибки 

Argument of type 'ComponentType<Pick<any, string | number | symbol> & StyledComponentProps<"title" | "toolbar" | "root" | "toolbarIcon" | "appBar" | "appBarShift" | "menuButton" | "menuButtonHidden" | "appBarSpacer">>' is not assignable to parameter of type 'new () => Component<Pick<any, string | number | symbol> & StyledComponentProps<"title" | "toolbar" | "root" | "toolbarIcon" | "appBar" | "appBarShift" | "menuButton" | "menuButtonHidden" | "appBarSpacer">, any, any>'.
  Type 'ComponentClass<Pick<any, string | number | symbol> & StyledComponentProps<"title" | "toolbar" | "root" | "toolbarIcon" | "appBar" | "appBarShift" | "menuButton" | "menuButtonHidden" | "appBarSpacer">, any>' is not assignable to type 'new () => Component<Pick<any, string | number | symbol> & StyledComponentProps<"title" | "toolbar" | "root" | "toolbarIcon" | "appBar" | "appBarShift" | "menuButton" | "menuButtonHidden" | "appBarSpacer">, any, any>'.  TS2345
...