在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

回答

相关问题