reactjs - react typescript : FunctionComponent with templated props

Question

我有一个带有模板化 Prop 的组件:

const MyComponent = <Value extends any>({ value }: MyComponentProps<Value>) => <div />;

我可以在不明确指定值类型的情况下使用它(这是推断的):

<MyComponent value="1" />
<MyComponent value={1} />

我通常这样编写组件:

const MyComponent: FunctionComponent<MyComponentProps> = ({ value }) => <div />;

但是还没有找到使用此语法模板 MyComponent 和 MyComponentProps 的方法...有人知道该怎么做吗？提前致谢!

Answer 1

您可以像这样扩展 ComponentProps:

interface MyComponentProps<T> {
   value: T
}

const MyComponent: FunctionComponent<MyComponentProps<string>> = ({ value }) => <div />;

现在值是您在 <> 中传递的任何内容，例如字符串或任何值。