diff --git a/components/menu/MenuItem.tsx b/components/menu/MenuItem.tsx index 7f952dcc8..e355fa74f 100644 --- a/components/menu/MenuItem.tsx +++ b/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('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; diff --git a/components/vc-menu/FunctionProvider.jsx b/components/vc-menu/FunctionProvider.jsx index a7704ac47..7e41eafc2 100644 --- a/components/vc-menu/FunctionProvider.jsx +++ b/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?.(); }, }; diff --git a/components/vc-menu/MenuItem.jsx b/components/vc-menu/MenuItem.jsx index 9b439c7ac..a7b320828 100644 --- a/components/vc-menu/MenuItem.jsx +++ b/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, diff --git a/components/vc-menu/MenuItemGroup.jsx b/components/vc-menu/MenuItemGroup.jsx index 2a1bf74e2..e82a86ef2 100644 --- a/components/vc-menu/MenuItemGroup.jsx +++ b/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, diff --git a/components/vc-menu/SubMenu.jsx b/components/vc-menu/SubMenu.jsx index 8e6d1c98b..69508a998 100644 --- a/components/vc-menu/SubMenu.jsx +++ b/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', diff --git a/components/vc-menu/SubPopupMenu.jsx b/components/vc-menu/SubPopupMenu.jsx index b5c5c9649..944c3eda1 100644 --- a/components/vc-menu/SubPopupMenu.jsx +++ b/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 ( - - {child} - - ); + return {child}; }, renderMenuItem(c, i, subMenuKey) {