Как правильно ввести React HOC? - PullRequest
Новая
       36

Как правильно ввести React HOC?

0 голосов
/ 18 сентября 2018

Я пытаюсь выяснить, правильно ли я набираю свой реагирующий компонент высшего порядка.По большей части это работает правильно, однако я сталкиваюсь с проблемой типирования при применении ссылки React к экземпляру HOC.Ниже приведено упрощенное воспроизведение: 

import * as React from "react";

// Is returning a React.ComponentClass correct here?
function HOC(): (Component: React.ComponentType) => React.ComponentClass {
    return function(Component: React.ComponentType): React.ComponentClass {
        return class Bar extends React.Component {}
    }
}

class Foo extends React.Component<{},{}> {}
const Bar = HOC()(Foo);

class Test extends React.Component {
    private ref: React.RefObject<typeof Bar> = React.createRef<typeof Bar>();

    render(): any {
        return (
            <React.Fragment>
              <Bar
                ref={this.ref} // error here
              />
            </React.Fragment>
        );
    }
}

Я также уловил проблему здесь: https://stackblitz.com/edit/react-ts-rtmfwr

Я получаю ошибку: 

index.tsx:20:21 - error TS2322: Type 'RefObject<ComponentClass<{}, any>>' is not assignable to type 'Ref<Component<{}, any, any>>'.
  Type 'RefObject<ComponentClass<{}, any>>' is not assignable to type 'RefObject<Component<{}, any, any>>'.
    Type 'ComponentClass<{}, any>' is not assignable to type 'Component<{}, any, any>'.
      Property 'setState' is missing in type 'ComponentClass<{}, any>'.

1 Ответ

0 голосов
/ 18 сентября 2018

Это должно работать: 

import * as React from "react";

// In a more realistic example, there would be a more interesting relationship
// between the props types of the wrapped and resulting components.    
function HOC(): <P>(Component: React.ComponentType<P>) => React.ComponentClass<{}> {
    return function<P>(Component: React.ComponentType<P>): React.ComponentClass<{}> {
        return class Bar extends React.Component<{}> {}
    }
}

class Foo extends React.Component<{x: string},{}> {}
const Bar = HOC()(Foo);
// Get the instance type corresponding to the `Bar` constructor function,
// as you would have if you had just written `class Bar`.
type Bar = InstanceType<typeof Bar>;

class Test extends React.Component {
    private ref: React.RefObject<Bar> = React.createRef<Bar>();

    render(): any {
        return (
            <React.Fragment>
              <Bar
                ref={this.ref}
              />
            </React.Fragment>
        );
    }
}
...