正确返回包装组件的组件的返回类型

Question

我目前正在尝试使用TypeScript编写一个小的包装器组件React.这是我的包装器：

function ConditionalWrapper({ condition, wrapper, children }: { condition?: boolean, wrapper?: (children: React.ReactNode) => any, children?: React.ReactNode }) {
return condition ? wrapper(children) : children;
}

然后可以像

<ConditionalWrapper condition={renderInputGroup} wrapper={c => <InputGroup >{c}</InputGroup>} >
...
</ConditionalWrapper>

问题是，我无法确定包装函数的正确返回类型应该是什么。使用当前的实现，我可以编写

<ConditionalWrapper condition={renderInputGroup} wrapper={c => "test"} >
...
</ConditionalWrapper>

这不会给我带来错误，因为any在这里没有错。但它应该是错误的，因为我只想返回另一个组件。

我已经尝试了React.ReactNode、JSX.Element、React.Component、React.FunctionComponent等，但到目前为止没有任何效果。

那么，为了在返回string而不是组件时出现错误，正确的返回类型是什么？

Answer 1

wrapper参数基本上是一个功能组件，因此它需要返回一个类型为ReactElement | null的值，该值与功能组件返回的类型相同。

wrapper?: (children: React.ReactNode) => ReactElement | null

此外，由于ConditionalWrapper函数体当前已编写，TypeScript 会给你一个错误，因为wrapper被标记为可选，这意味着你不能保证能够调用该方法。在调用函数之前，应更新函数的主体以检查是否提供了wrapper。即

return <>{condition && wrapper ? wrapper(children) : children}</>;