jsx和React中的动态标签名称

Question

我尝试编写一个React组件。用于html标题标签（h1，h2，h3等），其中标题优先级根据我们在道具中定义的优先级动态改变。

这里我试着去做。

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

预期输出：

<h1>Hello</h1>

这是行不通的。有没有可能的方法来做到这一点？

Answer 1

没有办法做到这一点原地的，只是把它放在一个变量（以首字母大写）：

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

<CustomTag>Hello</CustomTag > 

Answer 2

为了完整起见，如果你想使用动态名字，你也可以直接调用React.createElement代替使用JSX：

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

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

道具：

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

---

从docs：

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

用JSX编写的代码将被转换为使用React.createElement()。如果您使用的是JSX，则通常不会直接调用React.createElement()。请参阅React Without JSX了解更多信息。的