Reaction Higher Order Component (HOC) in Typoskript

Question

Ich versuche, eine React HOC in Typoskript schreiben, aber ich bekomme nicht die Definitionen richtig. Ich bin mir nicht sicher, ob das, was ich zu erreichen versuche, möglich ist.

Hier ist mein Code

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

Wenn ich nur die Requisiten und Staat, um das Kind es funktioniert vorbei bin. Aber wie kann ich die Definitionen schreiben, um zusätzliche Requisiten an die umwickelte Komponente zu übergeben? In diesem Fall wird die ChangeRequest-Prop.

Dank

Answer 1

Ich glaube, man muss nur den Kontext des HOC binden an die Change Funktion.

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

Und stellen Sie sicher, dass Sie die Requisite in InnerComponent handhaben. Beispielsweise. <InnerComponent onClick={this.props.changeRequest}>

Answer 2

Ich konnte es zum Funktionieren bringen. Aber ich bin mir nicht sicher, ob das der richtige Weg ist. Aber jetzt beschweren sich die Compiler nicht und der Code funktioniert. Für den Compiler aufhören zu beschweren musste ich die Requisiten als Javascript-Objekte hinzufügen.

Hier ist mein Arbeitscode:

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