React JSX 中的动态标签名称

javascript node.js reactjs jsx

2022-08-30 00:22:30

我正在尝试为HTML标题标签（，，等）编写一个React组件，其中标题级别是通过prop指定的。h1h2h3

我试图这样做：

<h{this.props.level}>Hello</h{this.props.level}>

我期望输出如下：

<h1>Hello</h1>

但这是行不通的。

有什么办法可以做到这一点吗？

答案 1

没有办法就地做到这一点，只需将其放在一个变量中（第一个字母大写）：

const CustomTag = `h${this.props.level}`;

<CustomTag>Hello</CustomTag>

答案 2

如果您使用的是 TypeScript，则会看到如下错误：

Type '{ children: string; }' has no properties in common with type 'IntrinsicAttributes'.ts(2559)

TypeScript 不知道这是一个有效的 HTML 标记名称，并抛出一个无用的错误。CustomTag

要修复，请转换为！CustomTagkeyof JSX.IntrinsicElements

// var name must start with a capital letter
const CustomTag = `h${this.props.level}` as keyof JSX.IntrinsicElements;

<CustomTag>Hello</CustomTag>