高阶组件类型问题

Question

我正在尝试下面的代码。但是打字错误不会消失。而且，不确定这个错误到底是什么意思。

type CounterProps = {
counter: number
}
const WithCounter = <T extends CounterProps> (Component: React.ComponentType<T>) => {
const ComponentWithCounter = (props: Omit<T, keyof CounterProps>) => {
return <Component {...props} counter={23} />
}
return ComponentWithCounter
}

我只是想注入一个计数器& &;数字&;我的底层组件的道具。它给出如下错误:

Type 'Omit<T, "counter"> & { counter: number; }' is not assignable to type 'IntrinsicAttributes & T'.
Type 'Omit<T, "counter"> & { counter: number; }' is not assignable to type 'T'.
'Omit<T, "counter"> & { counter: number; }' is assignable to the constraint of type 'T', but 'T' could be instantiated with a different subtype of constraint 'CounterProps'.ts(2322)

我遵循这个教程。我注意到那边他们做了{…props作为T}传递时…但我不明白为什么我们需要做这样的事情。

Answer 1

在花了几个小时的时间之后，我想出了这个解决方案。

interface CounterProps {
counter: number;
}
const withCounter = <T extends {}> (Component: ComponentType<T & CounterProps>) => {
const InnerComponent: React.FC<T> = (props) => {
return <Component {...props} counter={23} />
}
return InnerComponent;
}

Answer 2

根据您的实现，WithCounter可以按如下方式调用。

type InvalidType = {counter: number, invalidProperty: unknown}
const input: React.ComponentType<InvalidType> = ...
WithCounter(input)

但由于InvalidType不能作为Component的输入，因此显示了错误。