如何创建具有正确类型的反应组件映射[重复]

Posted 2023-02-22

【中文标题】如何创建具有正确类型的反应组件映射[重复]

【英文标题】：How to create a react component map with correct type [duplicate]

【发布时间】：2021-12-11 22:01:07

【问题描述】：

我正在尝试使用 typescript 创建一个反应组件映射，它根据键返回相应的组件，Item1 和 Item2 都是反应组件。

const componentMap: [key: string]: JSX. Element = 
 "Item1": Item1,
 "Item2": Item2,

下面是item1和item2的定义

type itemProps = 
  props1: string,
  props2: boolean,


export const Item1 = (): JSX.Element => 
  return (<div/>)


export const Item2 = (props: itemProps): JSX.Element => 
  return (<div/>)

codesandbox sample

但得到警报

TS2739: Type 'OverridableComponent<BoxTypeMap<, "div">>' is 
missing the following properties from type
 'ReactElement<any, any>': type, props, key

【问题讨论】：

欢迎来到 Stack Overflow！请将所有相关细节放入问题中，而不仅仅是链接。 Item1 是什么？ item2 是什么？不只将其放在代码沙箱上的三个理由：人们不应该去异地来帮助你；某些网站被某些用户屏蔽；和链接腐烂，使问题及其答案对未来的人们毫无用处。更多：How do I ask a good question? 和 Something in my web site or project doesn't work. Can I just paste a link to it?

由于这是关于 TypeScript，因此在 [TypeScript playground]() 中将问题复制为 minimal reproducible example 然后在问题中发布完整的 Playground 代码以及一个为方便起见，链接到操场。

【参考方案1】：

你可能需要一个 ReactElement 或 ReactNode 作为类型。请参阅When to use JSX.Element vs ReactNode vs ReactElement? 了解何时使用哪个。

【讨论】：

如果答案在该问题中，请投票以重复关闭而不是发布多余的答案。 （我不确定这个问题是否能回答这个问题，但如果是这样，那就是该做的。）

不完全是，但我认为有足够的副本来保证这一点。我标记了它。

感谢您的回答。 ReactNode 工作正常。