动态更改a-menu的theme属性是会报错

[grover142224]

• I have searched the issues of this repository and believe that this is not a duplicate.

Version

4.2.6

Environment

"vue": "^3.5.12",

Reproduction link

https://www.antdv.com/components/menu-cn

Steps to reproduce

新建一个简单页面，代码如下


<a-button @click="toggle">点我

<script lang="ts" setup> import type { ItemType, MenuTheme } from "ant-design-vue"; import { AppleFilled } from "@ant-design/icons-vue"; const theme = ref("light" as MenuTheme); const toggle = () => { theme.value = theme.value === "light" ? "dark" : "light"; }; const items: ComputedRef = computed(() => [ { icon: h(AppleFilled), title: "修改米啊", label: "修改米啊", key: "0" }, ]); </script>

点击按钮切换主题，会报错

What is expected?

动态更改menu组件的theme不报错

What is actually happening?

上面的代码在浏览器运行时会报错
runtime-core.esm-bundler.js:5926 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'subTree')

[YiMo1]

请给一个最小的复现案例，你可以通过CodeSandbox创建

[grover142224]

这是复现bug的链接，打开demo页面点击按钮切换theme会报错
https://codesandbox.io/p/sandbox/zhu-ti-ant-design-vue-4-2-6-forked-5qzvjq

[YiMo1]

和 ant-design-vue 没什么关系，这是 vue 的问题，在 computed 中使用 h 函数，并且 h 函数 type 参数是对象时就会报错。

vuejs/core#6913

除了Issue中提到的方案，还可以将 h 函数提出来，就像这样:

const icon = h(AppleFilled);
const items = computed(() => [{ icon, title: 'Test', label: 'Test', key: '0' }]);

或者 icon 返回一个渲染函数:

const items = computed(() => [
  { icon: () => h(AppleFilled), title: 'Test', label: 'Test', key: '0' },
]);

或者选择使用 ref 而不是 computed。

[grover142224]

明白了，tks