fix: menu title logic

Author: tangjinzhou

components/menu/MenuItem.tsx

@@ -3,7 +3,7 @@ import { Item, itemProps } from '../vc-menu';
 import { getOptionProps, getSlot } from '../_util/props-util';
 import Tooltip, { TooltipProps } from '../tooltip';
 import { SiderContextProps } from '../layout/Sider';
-
+import { injectExtraPropsKey } from '../vc-menu/FunctionProvider';
 export default defineComponent({
   name: 'MenuItem',
   inheritAttrs: false,
@@ -13,6 +13,7 @@ export default defineComponent({
     return {
       getInlineCollapsed: inject<() => boolean>('getInlineCollapsed', () => false),
       layoutSiderContext: inject<SiderContextProps>('layoutSiderContext', {}),
+      injectExtraProps: inject(injectExtraPropsKey, () => ({})),
     };
   },
   methods: {
@@ -22,7 +23,7 @@ export default defineComponent({
   },
   render() {
     const props = getOptionProps(this);
-    const { level, title, rootPrefixCls } = props;
+    const { level, title, rootPrefixCls } = { ...props, ...this.injectExtraProps } as any;
     const { getInlineCollapsed, $attrs: attrs } = this;
     const inlineCollapsed = getInlineCollapsed();
     let tooltipTitle = title;

components/vc-menu/FunctionProvider.jsx

@@ -1,15 +1,10 @@
-import PropTypes from '../_util/vue-types';
+// import PropTypes from '../_util/vue-types';
 import { provide, reactive } from 'vue';
-
+export const injectExtraPropsKey = Symbol();
 const FunctionProvider = {
   inheritAttrs: false,
-  props: {
-    injectExtraPropsKey: PropTypes.string,
-  },
   setup(props, { slots, attrs }) {
-    if (props.injectExtraPropsKey) {
-      provide(props.injectExtraPropsKey, reactive(attrs));
-    }
+    provide(injectExtraPropsKey, reactive(attrs));
     return () => slots.default?.();
   },
 };

components/vc-menu/MenuItem.jsx

@@ -6,7 +6,7 @@ import { connect } from '../_util/store';
 import { noop, menuAllProps } from './util';
 import { getComponent, getSlot, findDOMNode } from '../_util/props-util';
 import { inject } from 'vue';
-const injectExtraPropsKey = 'ANT_MENU_PROVIDER_PROPS_KEY';
+import { injectExtraPropsKey } from './FunctionProvider';
 const props = {
   attribute: PropTypes.object,
   rootPrefixCls: PropTypes.string,

components/vc-menu/MenuItemGroup.jsx

@@ -3,7 +3,7 @@ import { getComponent, getSlot } from '../_util/props-util';
 import { menuAllProps } from './util';
 import { defineComponent, inject } from 'vue';
 import classNames from '../_util/classNames';
-const injectExtraPropsKey = 'ANT_MENU_PROVIDER_PROPS_KEY';
+import { injectExtraPropsKey } from './FunctionProvider';
 const MenuItemGroup = {
   name: 'MenuItemGroup',
   inheritAttrs: false,

components/vc-menu/SubMenu.jsx

@@ -11,9 +11,9 @@ import { getComponent, filterEmpty, getSlot, splitAttrs, findDOMNode } from '../
 import { requestAnimationTimeout, cancelAnimationTimeout } from '../_util/requestAnimationTimeout';
 import { noop, loopMenuItemRecursively, getMenuIdFromSubMenuEventKey } from './util';
 import { getTransitionProps, Transition } from '../_util/transition';
+import { injectExtraPropsKey } from './FunctionProvider';
 
 let guid = 0;
-const injectExtraPropsKey = 'ANT_MENU_PROVIDER_PROPS_KEY';
 const popupPlacementMap = {
   horizontal: 'bottomLeft',
   vertical: 'rightTop',

components/vc-menu/SubPopupMenu.jsx

@@ -14,7 +14,6 @@ import {
   getPropsData,
 } from '../_util/props-util';
 import FunctionProvider from './FunctionProvider';
-const injectExtraPropsKey = 'ANT_MENU_PROVIDER_PROPS_KEY';
 function allDisabled(arr) {
   if (!arr.length) {
     return true;
@@ -323,11 +322,7 @@ const SubPopupMenu = {
       if (props.mode === 'inline' || isMobileDevice()) {
         newChildProps.triggerSubMenuAction = 'click';
       }
-      return (
-        <FunctionProvider injectExtraPropsKey={injectExtraPropsKey} {...newChildProps}>
-          {child}
-        </FunctionProvider>
-      );
+      return <FunctionProvider {...newChildProps}>{child}</FunctionProvider>;
     },
 
     renderMenuItem(c, i, subMenuKey) {