タイプスクリプト内の高次成分（HOC）に反応します

Question

タイプスクリプトにReact HOCを書き込もうとしていますが、正しい定義が得られません。私が達成しようとしていることが可能かどうかはわかりません。私はちょうどそれが動作子供に小道具や状態を渡していた場合

は、ここに私のコード

import * as React from 'react' 

export default function Ajax<Props, State>(InnerComponent: typeof React.Component): React.ComponentClass<Props & State> { 
    return class extends InnerComponent<Props & State,any> { 
    constructor() { 
     super() 
     this.state = { 
     request: 'initial' 
     } 
    } 
    changeRequest(newRequest) { 
     this.setState({request: 'loading'}) 
    } 
    render() { 
     return <InnerComponent 
     {...this.props } 
     {...this.state} 
     changeRequest={this.changeRequest} 
     /> 
    } 
    } 
} 

です。しかし、どのようにラップされたコンポーネントに追加の小道具を渡すことができるように定義を書くことができますか？この場合、changeRequest propが使用されます。私はあなただけchangeRequest関数にHOCのコンテキストをバインドする必要があると考えてい

おかげ

Answer 1

。

constructor() { 
    ... 
    this.changeRequest = this.changeRequest.bind(this) 
} 

InnerComponentの小道具を扱っていることを確認してください。例えば。
<InnerComponent onClick={this.props.changeRequest}>

Answer 2

私はそれを動作させることができました。しかし、私はこれが正しい方法であるとは確信していません。しかし、コンパイラは不平を言っていませんし、コードは動作します。 コンパイラが不平を停止するために、私はjavascriptオブジェクトとして小道具を追加しなければなりませんでした。ここで

は私の作業コードは次のとおりです。

import * as React from 'react' 

export default function Ajax<Props, State> (InnerComponent: typeof React.Component): React.ComponentClass<Props & State> { 
    return class extends InnerComponent<Props & State, any> { 
    constructor() { 
     super() 
     this.state = { 
     request: 'initial' 
     } 
     this.changeRequest = this.changeRequest.bind(this) 
    } 
    changeRequest(newRequest) { 
     this.setState({request: 'loading'}) 
    } 
    render() { 
     return <InnerComponent {...this.props} {...this.state} {...{onCLick: this.changeRequest}}/> 
    } 
    } 
}