jsx和React中的动态标记名

Question

我试着为html标题标签（h1，h2，h3等）写一个React组件，其中标题优先级根据我们在props中定义的优先级动态变化。

这就是我要做的。

预期产出：

这是行不通的。有什么方法可以做到这一点吗？




Answer 1

为完整起见，如果要使用动态名称，也可以直接调用React.createElement，而不是使用JSX:

React.createElement(`h${this.props.priority}`, null, 'Hello')

这避免了必须创建一个新的变量或组件。

有道具：

React.createElement(
  `h${this.props.priority}`,
  {
    foo: 'bar',
  },
  'Hello'
)

从文档中：

创建并返回给定类型的新React元素。类型参数可以是标记名字符串（如'div'或'span'），也可以是React组件类型（类或函数）。

使用JSX编写的代码将转换为使用React.createElement（）。如果使用JSX，通常不会直接调用React.createElement（）。有关更多信息，请参阅React with JSX。

Answer 2

匿名用户

如果您使用TypeScript，您会看到这样的错误：

类型“{children:string；}”没有与类型“IntrinsicAttributes”相同的属性。ts（2559）

TypeScript不知道CustomTag是有效的超文本标记语言标记名称，并抛出一个无益的错误。

要修复此问题，请将CustomTag转换为JSX. IntrinsicElements的key！

const CustomTag = `h${this.props.priority}` as keyof JSX.IntrinsicElements;

<CustomTag>Hello</CustomTag>

Answer 3

没有办法做到这一点，只需将其放入变量中（首字母大写）：

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

<CustomTag>Hello</CustomTag>