Question

我有一个使用泛型键入的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的组件上工作得非常好但是在这里我得到以下错误：

错误TS2304：找不到姓名＆＃39; ConnectedMyForm＆＃39;。

在type TypedForm = new () => ConnectedMyForm<FormType>;行。

仅当我将HOC功能应用于我的组件时才会发生这种情况。我猜它是因为我没有在表单的连接版本上指定泛型类型。但是我如何指定输入？

Answer 1

为什么不创建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中使用那个HoC：

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" />
    );
  }

在Generic Typescript React Components上使用HOC

1 个答案: