用于从字符串创建 JSX 元素的正确 TypeScript 类型

Question

我有一个组件，我想默认将其呈现为h2. 如果他们愿意，我希望消费者能够指定不同的元素。下面的代码导致错误：

TS2604 - JSX element type 'ElementType' does not have any construct or call signatures

我想我明白为什么它会失败，TS 期望渲染一个 React 节点。为清楚起见，只要变量以大写字母开头（这是 JSX 要求），React就能够呈现作为字符串引用的元素。我之前在 vanilla JS + React 中成功做到了这一点，我只是不知道如何满足 TypeScript。

我怎样才能让 TypeScript 在不诉诸于的情况下呈现这个 elementType?: any

import React, {ReactNode} from 'react'

interface Props {

    children: ReactNode;

    elementType?: string;

}

export default function ({children, elementType: ElementType = 'h2'}: Props): JSX.Element {

    return (

        <ElementType>{children}</ElementType>

    );

}

Answer 1

使用keyof JSX.IntrinsicElements：import * as React from 'react'interface Props {&nbsp; children: React.ReactNode;&nbsp; elementType?: keyof JSX.IntrinsicElements;}export default function ({ children, elementType: ElementType = 'h2' }: Props): JSX.Element {&nbsp; return (&nbsp; &nbsp; <ElementType>{children}</ElementType>&nbsp; );}