Verwenden von HOCs auf Generic Typescript React Components

Question

Ich habe eine React-Komponente, die mit einem generischen typisiert ist. Diese Komponente wiederum wird mit einer Komponente höherer Ordnung (in diesem Fall Redux-Form) erweitert. Hier ist eine abisoliert Version meiner Klasse und die HOC angewendet:

import * as React from "react"; 

interface MyFormProps<D> { 
    prop: D; 
    form: string; 
} 

class MyForm<D> extends React.Component<MyFormProps<D>, {}> { 
    render(): JSX.Element { 
     return (
      <form> 
       {this.props.prop} 
      </form> 
     ); 
    } 
} 

export const ConnectedMyForm = reduxForm({} as Config<any, {}, {}>)(MyForm); 

Dann versuche ich eine typisierte Version meiner Komponente in einer anderen Komponente zu erstellen.

import { ConnectedMyForm } from "./my-form"; 

interface FormType { 
    // Form props here 
} 

type TypedForm = new() => ConnectedMyForm<FormType>; 
const TypedForm = ConnectedMyForm as TypedForm; 

Um wie folgt zu können, um es in TSX verwenden:

<TypedForm /> 

Diese Methode funktioniert absolut in Ordnung auf einer anderen Komponente I aufgebaut haben, die nicht HOC angewendet hat aber hier bekomme ich der folgende Fehler:

error TS2304: Cannot find name 'ConnectedMyForm'.

auf der type TypedForm = new() => ConnectedMyForm<FormType>; Zeile.

Dies passiert nur, wenn ich die HOC-Funktion auf meine Komponente anwenden. Ich schätze, es liegt daran, dass ich die generische Typisierung für die verbundene Version des Formulars nicht angegeben habe. Aber wie würde ich diese Eingabe angeben?

Answer 1

Warum nicht nur hoc/EnhancedForm wie:

import * as React from 'react'; 

interface EnhancedProps { 
    name: string; 
} 

export default <T extends {}>(Component: React.StatelessComponent<T> | React.ComponentClass<T>): 
    React.StatelessComponent<T & EnhancedProps> => 
    (props: T & EnhancedProps) => { 
     return <Component { ...props } /> 
    } 

Und dann verwenden, genau das HoC in Ihrem SimpleForm wie:

const SimpleForm = props => { 

    const handleSubmit =() => { alert("Validated"); } 

    const { pristine, reset, submitting } = props 
    return (
    <form onSubmit={ handleSubmit }> 
     <div> 
     <label>First Name</label> 
     .... 
    </form> 
) 
} 

export default EnhancedForm(reduxForm({ 
    form: 'simple' // a unique identifier for this form 
})(SimpleForm)) 

Und es schließlich verwenden, wie Sie beschreiben:

render() { 
    return (
     <SimpleForm name="SimpleName" /> 
    ); 
    }