javascript - React JSX 中的动态标签名称

Question

我正在尝试为 HTML 标题标签(h1、h2、h3 等)编写 React 组件，其中标题等级是通过 Prop 指定的。

我试着这样做:

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

我期望的输出如下:

<h1>Hello</h1>

但这不起作用。

有什么办法吗？

Answer 1

没有办法就地执行此操作，只需将其放入变量中(with first letter capitalised):

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

<CustomTag>Hello</CustomTag>