React JSX 中的动态标签名称

Question

我正在尝试为 HTML 标题标签（ h1 ， h2 ， h3 等）编写一个 React 组件，其中通过标题级别指定.

我试着这样做：

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

我期望输出如下：

 <h1>Hello</h1>

但这是行不通的。

有什么办法吗？

原文由 Eranga Kapukotuwa 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

无法就地执行此操作，只需将其放入变量中（ 首字母大写）：

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

<CustomTag>Hello</CustomTag>

原文由 zerkms 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

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

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

要修复，将 CustomTag 为 keyof JSX.IntrinsicElements ！

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

<CustomTag>Hello</CustomTag>

原文由 Jack Steam 发布，翻译遵循 CC BY-SA 4.0 许可协议