如何使用靜態屬性鍵入React.ComponentType？

我正在爲next.js頁面編寫HOC組件，並且此HOC需要接受具有特定getInitialProps靜態函數的組件。如何使用靜態屬性鍵入React.ComponentType？

我不能找出正確的打字本帶流量：

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} />; 
     } 
    } 
}

我得到這個錯誤：

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

Demo

來源

2017-09-26 Simon Boudrias

反應的組分從未有過的'getInitialProps'方法。如果這些是特定的組件，那麼你必須鍵入'Component'，而不是'React.Component'。 –

@FelixKling你的意思是創建一個類接口？ –

我想這會工作。 –

這是你在找什麼？

// @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)

我覺得這是非常令人迷惑自己。我適應從這個：

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

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

來源

2017-11-16 23:54:40

哦，是的，完全是我在找的！非常感謝：） –

-1

你甚至知道確切的你期待的期限。用這麼多先前的知識搜索它是一件輕而易舉的事情。只需使用關鍵字static在你想變成靜態方法的方法前面

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

編輯：我的壞。我在看你的代碼，我試圖解釋它。我很好奇。爲什麼你對React使用這種非傳統的類/組件語法有什麼原因？除非您知道當前語法的細節，否則您可能會絆倒自己。如果你決定用更傳統的語法來尋求幫助，我想我可能會有用。

來源

2017-09-26 06:08:51 Andrew

雖然這個鏈接可能回答這個問題，但最好在這裏包含答案的重要部分，並提供供參考的鏈接。如果鏈接頁面更改，則僅鏈接答案可能會失效。 - [來自評論]（/ review/low-quality-posts/17445516） – Antti29

這不是我的問題。我想輸入**參數**作爲暴露特定靜態方法的'React.Component'。我能夠聲明靜態方法（如你在我的例子中看到的） –

@SimonBoudrias道歉。我更新了我的問題。 – Andrew

如何使用靜態屬性鍵入React.ComponentType？

回答

相關問題