如何在TSX渲染函数中使用动态组件名称？

你原来的写法不符合JSX语法规范，无法被正确解析。要实现动态标签渲染，需要遵循以下正确方式：

核心解决方案 #

将动态计算出的标签名赋值给一个大写开头的变量（JSX约定大写开头的变量为组件/标签标识符），再用该变量作为标签使用。

完整可运行代码 #

<script lang="tsx">
import { defineComponent, computed, PropType } from 'vue'

export default defineComponent({
  props: {
    hLevel: {
      type: String as PropType<'1'|'2'|'3'>,
      required: false,
      default: '3'
    }
  },
  setup(props) {
    // 用computed维护响应式标签名，变量名大写开头
    const Tag = computed(() => `h${props.hLevel}` as const)
    
    return () => (
      <div>
        <Tag>title</Tag>
      </div>
    )
  }
})
</script>

关键说明 #

1. 变量命名规则：必须使用大写开头的变量（如Tag而非tag），这是JSX的语法约定，Vue的TSX编译器会以此识别动态标签。
2. 类型安全：添加as const可以让TypeScript准确推断标签类型为'h1'|'h2'|'h3'，避免类型报错。
3. 响应式处理：使用computed包裹标签名计算逻辑，确保hLevel变化时标签能自动更新。

简化写法（无需computed） #

如果不需要提前维护响应式状态，也可以直接在渲染函数内处理：

setup(props) {
  return () => {
    const Tag = `h${props.hLevel}` as 'h1' | 'h2' | 'h3'
    return (
      <div>
        <Tag>title</Tag>
      </div>
    )
  }
}

为什么静态字符串写法可行？ #

你提到的const HeadTag = 'h1'能正常运行，是因为它符合JSX的大写变量命名规则，编译器会将其识别为标签名；而<[tag.value]>这种直接在尖括号内使用表达式的写法，不符合JSX语法规范，因此无法生效。

内容的提问来源于stack exchange，提问作者Johan