vue3 Component inside ＜Transition＞ renders non-element root node that cannot be animated.

报错解释：

在Vue 3中，当你尝试使用<Transition>组件包裹一个组件（Component）时，如果该组件返回了非元素的根节点（比如字符串、null、undefined或者一个组件），则会出现这个错误。<Transition>组件需要一个单独的根元素来包裹动画。

解决方法：

确保被<Transition>组件包裹的组件总是返回一个单独的根元素。如果组件有时候返回字符串或null，请确保它总是返回一个包含这些内容的单个元素。如果组件可能返回undefined或其他值，请确保它总是返回一个VNode，例如一个空的<div>或其他元素。

示例：

如果你的组件可能返回以下内容，则需要修改以确保总是返回一个元素。

// 错误的返回方式
if (condition) {
  return 'some string';
} else {
  return; // 或者 return null; 或者 return undefined;
}
 
// 正确的返回方式
return <div>
  {condition ? 'some string' : null}
</div>;

在某些情况下，如果你不希望在条件渲染下渲染任何东西，可以使用一个空的<div>作为占位符。

// 确保总是返回一个元素
return (
  <div>
    {condition ? <ChildComponent /> : <div />}
  </div>
);

总结：

确保<Transition>的子组件总是返回一个单个的根元素，可以通过条件渲染或者使用占位符来保证。