如何在Nuxt3中渲染JSX元素的嵌套数组？

在Vue3/Nuxt3中，不能直接用模板双大括号插值渲染VNode数组（双大括号会将内容当作纯文本转义），以下是两种可行的解决方式：

方法1：直接在JSX中返回VNode数组作为组件渲染内容 #

如果你使用JSX语法的<script setup>，可以直接返回VNode数组作为组件的渲染结果，无需额外模板：

<script lang="jsx" setup>
const postContent = [
  <h1 key="post-title">文章标题</h1>,
  <p key="post-para1">第一段内容...</p>,
  <p key="post-para2">包含<b>加粗文本</b>的段落</p>
]

// 直接返回VNode数组作为渲染内容
return () => postContent
</script>

方法2：在模板中使用<component>标签循环渲染 #

如果你需要在Vue模板中渲染VNode数组，可通过<component>标签配合v-for逐个渲染每个VNode：

<script lang="jsx" setup>
const postContent = [
  <h1 key="post-title">文章标题</h1>,
  <p key="post-para1">第一段内容...</p>,
  <p key="post-para2">包含<b>加粗文本</b>的段落</p>
]
</script>

<template>
  <!-- 循环渲染每个VNode -->
  <component 
    v-for="(vnode, idx) in postContent" 
    :key="vnode.key || idx" 
    :is="vnode" 
  />
</template>

处理嵌套VNode数组 #

如果你的VNode数组存在嵌套结构（比如某个元素是子VNode数组），需要先将数组扁平化，再进行渲染：

<script lang="jsx" setup>
// 嵌套结构的VNode数组
const nestedContent = [
  <h1 key="title">嵌套示例标题</h1>,
  [
    <p key="sub-para1">嵌套段落1</p>,
    <p key="sub-para2">嵌套段落2</p>
  ]
]

// 扁平化数组（支持任意深度嵌套）
const flatContent = nestedContent.flat(Infinity)
</script>

<template>
  <component 
    v-for="(vnode, idx) in flatContent" 
    :key="vnode.key || idx" 
    :is="vnode" 
  />
</template>

注意事项 #

• 每个VNode最好显式设置唯一的key属性，避免渲染时出现性能问题或错误；
• 不要使用v-html渲染VNode数组，v-html仅适用于渲染字符串格式的HTML内容，无法解析VNode对象。

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