在Generic Typescript React組件上使用HOC

我有一個React組件，它使用泛型進行鍵入。該組件反過來被擴展爲一個更高階的組件（在這種情況下，還原形式）。這裏是我的類的剝離背版和正在應用的HOC：在Generic Typescript React組件上使用HOC

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);

然後我嘗試在其他組件來創建我的組件的類型版本。

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

interface FormType { 
    // Form props here 
} 

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

爲了能夠在TSX使用它，如下所示：

<TypedForm />

此方法絕對沒在另一個組件上我已經建立了不具有HOC應用於但在這裏我得到出現以下錯誤：

error TS2304: Cannot find name 'ConnectedMyForm'.

on type TypedForm = new() => ConnectedMyForm<FormType>; line。

只有當我將HOC函數應用到我的組件時纔會發生這種情況。我猜這是因爲我沒有在表單的連接版本中指定泛型。但是，我將如何指定鍵入？

來源

2017-07-05 Simon

爲什麼不創建一個hoc/EnhancedForm，如：

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

，然後只用這特別在SimpleForm，如：

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

最後用它作爲你的描述：

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

來源

2017-07-06 14:29:46 apanizo

我得到你想要做的，但我試圖給一個泛型類型的形式的道具之一，而不是用通用的方式來整個道具對象。基本上，我試圖創建一個表單，接受一種類型作爲將在表單中表示的數據的類型。在那一刻，它只是輸入爲「any」，它可以正常工作，但在表單數據上進行正確的輸入會很好。 – Simon

或者有可能是我錯過了什麼？ – Simon

在Generic Typescript React組件上使用HOC

回答

相關問題