Component inside <Transition> renders non-element root node that cannot be a

报错

Component inside renders non-element root node that cannot be animated.

原因:

下方代码导致的报错

js 复制代码
      <transition name="fade-transform" mode="out-in">
         <keep-alive :include="tagsViewStore.cachedViews">
           <component v-if="!route.meta.link" :is="Component" :key="route.path"/>
         </keep-alive>
      </transition>

在 Vue.js 中,当你使用 <transition> 组件来包裹另一个组件时,<transition> 组件期望其直接子组件渲染一个单一的根元素。这是因为 <transition> 组件需要能够明确地捕捉和管理这个根元素的进入(enter)和离开(leave)过渡效果。

然而,当你将 <keep-alive> 组件作为 <transition> 的直接子组件时,并且 <keep-alive> 内部又包含了 <component> 动态组件,可能会出现问题。特别是,如果 <component> 根据不同的 is 属性值渲染出不同的组件,而这些组件的根元素不是统一的(比如,一个组件渲染了一个 div,而另一个渲染了一个 span),那么 <transition> 组件就会难以处理这种不一致性。

此外,如果 <keep-alive> 缓存的组件在其内部有条件地渲染了不同的元素(即不是始终渲染一个稳定的根元素),这同样会导致 <transition> 组件出现问题。

警告信息 "Component inside renders non-element root node that cannot be animated or controlled via CSS transitions" 通常意味着 <transition> 组件无法确定如何为它的直接子组件(在这个情况下是 <keep-alive>,但实际上是 <keep-alive> 内部的 <component> 渲染的内容)应用 CSS 过渡效果

解决办法

1.在外层包裹一个div确保**<transition-group>下只有一个根元素

2.使用<transition-group> :如果你的组件确实需要渲染多个根元素(虽然这通常不是 <transition> 的用例),你可以考虑使用 <transition-group>。但是,请注意 <transition-group> 要求其直接子元素有一个共同的父元素,并且这些子元素必须有唯一的 key 属性。

3.检查 <keep-alive> 的使用:确保 <keep-alive> 的使用是恰当的,并且它包裹的组件在渲染时不会改变其根元素。

注:

<keep-alive>组件会创建并缓存真实的 DOM 元素,而<component>组件则根据当前渲染的组件来决定是否创建真实的 DOM 元素

相关推荐
金梦人生6 分钟前
Css性能优化
前端·css
Holin_浩霖7 分钟前
UI设计的底层逻辑:从组件到系统的跃迁
前端
Holin_浩霖7 分钟前
前端开发者的 Web3 全图解实战 二
前端
写代码的皮筏艇7 分钟前
CSS属性继承与特殊值
前端·css
kevlin_coder11 分钟前
🚀 实现同一个滚动区域包含多个虚拟滚动列表
前端·javascript
金梦人生12 分钟前
JS 性能优化
前端·javascript
我有一棵树19 分钟前
使用Flex布局实现多行多列,每个列宽度相同
前端·css·html·scss·flex
浪裡遊21 分钟前
React开发模式解析:JSX语法与生命周期管理
前端·javascript·react.js·前端框架·ecmascript
用户8772447539626 分钟前
Lubanno7UniverSheet:开放底层能力,让你的表格需求 “不设限”
前端
张可爱32 分钟前
ES6奶茶铺版通俗笔记 🍵✨
前端