Javascript 构建自定义选项卡组件时无法在渲染函数中使用 TransitionGroup

正如我在标题中所写，我正在try 构建自己的选项卡组件.到目前为止，这是非常基本的:

Tabs.vue

setup(props, { slots }) {
  const { activeTab } = toRefs(props);
  provide("activeTab", activeTab);

  const newSlots = slots.default().map((slot, index) => {
    return h(slot, {
      index, // for each tab to know, whether is active
      key: index, // for TransitionGroup
    });
  });

  return () =>
    h(
      TransitionGroup,
      {
        name: "tabs-fade",
      },
      () => newSlots
    );
}

Tab.vue

<template>
  <div v-if="activeTab === index">
    <slot />
  </div>
</template>

setup() {
  const activeTab = inject("activeTab");

  return {
    activeTab,
  };
},

我打算这样使用它:

<ul>
  <li @click="activeTab = 0">1</li>
  <li @click="activeTab = 1">2</li>
  <li @click="activeTab = 2">3</li>
</ul>
<Tabs :activeTab="activeTab">
  <Tab> 1 </Tab>
  <Tab> 2 </Tab>
  <Tab> 3 </Tab>
</Tabs>

如果没有TransitionGroup，一切都可以正常工作，尽管当我试图添加它以实现更平滑的过渡时，我在try 在选项卡之间切换时遇到了一个错误:

[Vue warn]: Unhandled error during execution of render function 
  at <TransitionGroup name="tabs-fade" > 
  at <Tabs activeTab=1 > 
  at <Testing> 
  at <App>

[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/core 
  at <TransitionGroup name="tabs-fade" > 
  at <Tabs activeTab=1 > 
  at <Testing> 
  at <App>
Uncaught (in promise) TypeError: child.el.getBoundingClientRect is not a function