在React

Question

我通过以下方式将React与TypeScript结合使用：

interface MyComponentProps {
    ...
    ...
}

const MyComponent:FunctionComponent<MyComponentProps> = props => {
    ...
    ...
    ...
}

现在我需要定义以下道具类型：

interface MyComponent2Props<T> {
    prop1: T,
    ...
}

我试图定义组件：

const MyComponent2<T>:FunctionComponent<MyComponent2Props<T>> = props => {
    ...
    ...
    ...
}

但这是不正确的语法。

定义此类组件的正确方法是什么？

Answer 1

您可以尝试这样的事情：

import * as React from "react";
import { render } from "react-dom";

import "./styles.css";

interface Props<T> {
  a: T;
}

const Component = <T extends {}>(props: Props<T>) => {
  return <div>{props.a}</div>;
};

function App() {
  return <Component a="testing" />;
}

const rootElement = document.getElementById("root");
render(<App />, rootElement);

您可以view the example here。

请注意，extends {}在tsx文件中是必需的。参见：What is the syntax for Typescript arrow functions with generics?

Answer 2

尝试一下：

const MyComponent2 = <T>(props: SomeProps): FunctionComponent<MyComponent2Props<T>> => {}