该警告如何处理withDirectives can only be used inside render functions?

vue3+tsx+vite环境,出现了这个警告
image.png
请问这个警告是什么意思,或者说是什么原因导致的.
整个项目中, 并没有使用到withDirectives这个函数
下文帖的代码是warn中提到的router-view组件部分

import { computed, defineComponent, KeepAlive, Transition } from 'vue';
import { useStore } from '@/store/system/theme';
import './RouteView.less';
export default defineComponent({
  name: 'RouteView',
  components: {
    'keep-alive': KeepAlive,
    Transition,
  },
  props: {
    keepAlive: {
      type: Boolean,
      default: true,
    },
  },
  setup() {
    const multiTab = computed(() => useStore().multiTab);
    return {
      multiTab,
    };
  },
  render() {
    const {
      $route: { meta },
      multiTab,
    } = this;
    console.log(this.$slots);
    const RootBox = (
      _props: unknown,
      { slots }: { slots: { default: () => unknown } }
    ) => <div class="transition">{slots.default ? slots.default() : ''}</div>;
    const inKeep = (
      <router-view>
        {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
        {({ Component }: { Component: any }) => {
          return (
            <transition
              name={meta.transition || 'fade-translate'}
              mode="out-in"
              appear
            >
              <RootBox key={this.$route.path}>
                <keep-alive>
                  <Component key={this.$route.path} />
                </keep-alive>
              </RootBox>
            </transition>
          );
        }}
      </router-view>
    );
    const notKeep = <router-view />;
    // 这里增加了 multiTab 的判断,当开启了 multiTab 时
    // 应当全部组件皆缓存,否则会导致切换页面后页面还原成原始状态
    // 若确实不需要,可改为 return meta.keepAlive ? inKeep : notKeep
    return this.keepAlive || multiTab || meta.keepAlive ? inKeep : notKeep;
  },
});

阅读 2.3k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
logo
Microsoft
子站问答
访问
宣传栏