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

Question

我目前正在尝试使用React在TypeScript中编写一些包装器组件。这是我的包装器：

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?: ReactElement | null

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

return condition && wrapper ? wrapper(children) : children;