Comment entrer un React.ComponentType avec une propriété statique?

Question

J'écris un composant HOC pour les pages next.js, et ce HOC doit accepter un composant avec une fonction statique getInitialProps spécifique.

Je ne peux pas trouver la bonne frappe de ce flux avec:

const wrapComponent = (Component: React.ComponentType<*>) => { 
    const original: Function = Component.getInitialProps; 

    return class extends React.Component<*> { 
     static async getInitialProps(ctx) { 
      const props = await original(ctx); 
      return { 
       ...props, 
       custom: 'a', 
      }; 
     } 

     render() { 
      return <Component {...this.props} />; 
     } 
    } 
} 

Je reçois cette erreur:

5:  const original: Function = Component.getInitialProps; 
              ^property `getInitialProps`. Property not found in 
5:  const original: Function = Component.getInitialProps; 
           ^statics of React$Component 

Demo

Answer 1

Est-ce ce que vous cherchez?

// @flow 

import React from 'react'; 
import type {ComponentType} from 'react'; 

interface StaticInterface { 
    fn(): void; 
} 

class NoStatic extends React.Component<{}> { 
} 

class WithStatic extends React.Component<{}> { 
    static fn() {} 
} 

const c1: ComponentType<{}> = NoStatic;      
const c2: ComponentType<{}> = WithStatic;      
const c3: ComponentType<{}> & StaticInterface = WithStatic; 
// const c4: ComponentType<{}> & StaticInterface = NoStatic;  // NOT OK 

(demo)

Je trouve cette jolie me confondre. J'adaptèrent de ceci:

https://blog.bluematador.com/posts/enforcing-method-presence-in-react-components-with-flow

connexes:

https://github.com/facebook/flow/issues/2048

https://github.com/facebook/flow/pull/3994

Answer 2

Vous savez même exactement terme que vous recherchez. Googling avec autant de connaissances préalables est un jeu d'enfant. Il suffit d'utiliser le mot-clé static devant la méthode que vous souhaitez transformer en une méthode statique

class SampleClass { 
    static test() { 
    console.log('I am a static method') 
    } 
} 
SampleClass.test() 
// 'I am a static method' 

d'édition: Mon mauvais. Je regarde votre code et j'essaie de l'interpréter. Je suis tellement curieux. Y a-t-il une raison pour laquelle vous utilisez une syntaxe de classe/composante non conventionnelle pour React? Vous pourriez vous trébucher si vous ne connaissez pas les tenants et les aboutissants de votre syntaxe actuelle. Si vous décidez de demander de l'aide avec une syntaxe plus conventionnelle, je pense que je pourrais être utile.