Question

我无法正确键入包装在包含通用类的Form.create（）中的功能组件。

以下是功能组件的示例

describe("Most basic test of adding a comments 2", function () {
  it("Adding one comment 2", function () {
    cy.pause();
    cy.visit("http://localhost:8080");
    cy.pause();
    cy.get(".comment").click();
    cy.pause();
    cy.get("div#viewer.pdfViewer").click(50, 300);

    cy.get("input#pdf-annotate-point-input").type("Testkommentar{enter}");
    cy.get("input#pdf-annotate-point-input").debug();
    expect(localStorage.getItem("example.pdf/pen/color")).to.be.not.null;
    expect(localStorage.getItem("exaxmple.pdf/annotations")).to.be.not.null;
  });
});

当我尝试使用此组件时，它抱怨左右的道具不存在，这是有道理的，因为我不知道如何传递泛型。

对于没有通用类型的组件，我知道interface IProps<T> extends FormComponentProps { left: T; right: T; } const SampleComponent = <T extends object>(props: IProps<T>): JSX.Element => { leaving this out for simplicity }; export default Form.create()(SampleComponent);，但是我不确定如何正确传递该通用类型。任何帮助将不胜感激。

Answer 1

您可以使用FunctionComponent接受一个类型参数，然后像现在正在使用的那样在prop接口中声明想要用于props的泛型（带有任何约束，例如extends object）。然后，您可以将用作参数的任何泛型传递到组件类型的泛型OF中。这将自动键入您的道具，因此无需将其显式声明为您的道具类型。例如：

interface IProps<T extends object> extends FormComponentProps {
  left: T;
  right: T;
}

const SampleComponent: FunctionComponent<IProps<MyGenericType>> = ({ left, right }) => {
  return <div/>
}

其中MyGenericType是左右类型，这也扩展了对象类型。

Answer 2

您需要更改最后一行作为https://ant.design/components/form/#Using-in-TypeScript的引用

Form.create<IProps>()(SampleForm);

当组件使用泛型类型时键入antd form.create

2 个答案: