Question

我有一个想要更通用的组件。

interface Props {
  arbitraryProp: CertainType | DifferentType;
}
const MyComponent: React.FC<Props> = ({ arbitraryProp }) => ( ... );

在该示例中，提供了两个道具。但是，对于该道具的其他实现，在此示例中为任意，我将不得不将其添加到该列表中：

interface Props {
  arbitraryProp: CertainType | DifferentType | YetAnotherType; // <- another one...
}
const MyComponent: React.FC<Props> = ({ arbitraryProp }) => ( ... );

是否可以先提供该属性的类型，而不是将其作为通用类型？

因此它将变为：

interface Props<T> {
  arbitraryProp: T;
}
const MyComponent: React.FC<Props<T>> = ({ arbitraryProp }) => ( ... );

使用它就像：

<MyComponent
  // should have: CertainType
  arbitraryProp={certainThing}
/>

<MyComponent
  // should have: DifferentType
  arbitraryProp={differentThing} 
/>

<MyComponent
  // should have: YetAnotherType
  arbitraryProp={YetAnotherType} 
/>

Answer 1

是的，但是您需要将FC声明为一个函数，因为没有语法可以使箭头函数通用。

interface MyProps<T> {
  arbitraryProp: T;
}

function MyComponent<T>(props: MyProps<T>) {
  return ...;
}

（如果您需要由children注入的React.FC道具，则可以添加make类型为props React.PropsWithChildren<MyProps<T>>。）

我可以使用泛型类型为React组件提供一种类型吗？

1 个答案: