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

Question

我有一个组件，我想将其默认呈现为 h2。我希望消费者能够根据需要指定不同的元素。以下代码导致错误:

TS2604 - JSX 元素类型“ElementType”没有任何构造或调用签名

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

如何在不使用 elementType 的情况下让 TypeScript 渲染它？: 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 {
  children: React.ReactNode;
  elementType?: keyof JSX.IntrinsicElements;
}

export default function ({ children, elementType: ElementType = 'h2' }: Props): JSX.Element {
  return (
    <ElementType>{children}</ElementType>
  );
}