在函数组件中添加泛型类型

Question

我有下一个代码：

interface Interface<T> {
submit: T,
children: (ctx: { test: string, info: string }) => React.ReactNode | ReactElement;
}

const Test: React.FC<Interface<T>> = ({submit, children}) => {
return (
<div>
{children({test: '123', info: '3'})}
</div>
)
}

如何在此处添加T<Interface<T>？

Answer 1

React.FC不能用于定义通用组件。幸运的是，您并不真正需要React.FC，只需使函数通用并指定参数上道具的类型即可：

const Test = <T,>({submit, children}: Interface<T>) => {
return (
<div>
{children({test: '123', info: '3'})}
</div>
)
}

游乐场链接