时间戳

首页 > 解决方案 > 正确的返回类型的组件返回一个包装的组件

reactjs - 正确的返回类型的组件返回一个包装的组件

问题描述

我目前正在尝试在Reactusing中编写一个小包装组件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等等，但到目前为止没有任何效果。

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

标签： reactjstypescript

解决方案

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

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

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

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

推荐阅读