diff --git a/components/_util/vnode.js b/components/_util/vnode.js index 9cc6cd6d8..c39e87a57 100644 --- a/components/_util/vnode.js +++ b/components/_util/vnode.js @@ -1,5 +1,6 @@ import { filterEmpty, parseStyleText } from './props-util'; import classNames from 'classnames'; +import { warning } from '../vc-util/warning'; export function cloneVNode(vnode, deep) { const componentOptions = vnode.componentOptions; @@ -62,6 +63,11 @@ export function cloneElement(n, nodeProps = {}, deep) { return null; } const node = cloneVNode(ele, deep); + // 函数式组件不支持clone https://github.com/vueComponent/ant-design-vue/pull/1947 + warning( + !(node.fnOptions && node.fnOptions.functional), + `can not use cloneElement for functional component (${node.tag})`, + ); const { props = {}, key, on = {}, children, directives = [] } = nodeProps; const data = node.data || {}; let cls = {}; @@ -127,10 +133,6 @@ export function cloneElement(n, nodeProps = {}, deep) { node.data.on = { ...(node.data.on || {}), ...on }; } - if (node.fnOptions && node.fnOptions.functional) { - node.data.on = { ...(node.data.on || {}), ...on }; - } - if (key !== undefined) { node.key = key; node.data.key = key; diff --git a/components/tabs/TabBar.jsx b/components/tabs/TabBar.jsx index aba267d77..17b3f0cf3 100644 --- a/components/tabs/TabBar.jsx +++ b/components/tabs/TabBar.jsx @@ -1,9 +1,25 @@ import Icon from '../icon'; import ScrollableInkTabBar from '../vc-tabs/src/ScrollableInkTabBar'; import { cloneElement } from '../_util/vnode'; +import PropTypes from '../_util/vue-types'; +import { getListeners } from '../_util/props-util'; const TabBar = { - functional: true, - render(h, context) { + name: 'TabBar', + inheritAttrs: false, + props: { + prefixCls: PropTypes.string, + tabBarStyle: PropTypes.object, + tabBarExtraContent: PropTypes.any, + type: PropTypes.oneOf(['line', 'card', 'editable-card']), + tabPosition: PropTypes.oneOf(['top', 'right', 'bottom', 'left']).def('top'), + tabBarPosition: PropTypes.oneOf(['top', 'right', 'bottom', 'left']), + size: PropTypes.oneOf(['default', 'small', 'large']), + animated: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]), + renderTabBar: PropTypes.func, + panels: PropTypes.array.def([]), + activeKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + }, + render() { const { tabBarStyle, animated = true, @@ -13,7 +29,7 @@ const TabBar = { prefixCls, type = 'line', size, - } = context.props; + } = this.$props; const inkBarAnimated = typeof animated === 'object' ? animated.inkBar : animated; const isVertical = tabPosition === 'left' || tabPosition === 'right'; @@ -39,14 +55,15 @@ const TabBar = { const renderProps = { props: { - ...context.props, + ...this.$props, + ...this.$attrs, inkBarAnimated, extraContent: tabBarExtraContent, prevIcon, nextIcon, }, style: tabBarStyle, - on: context.listeners, + on: getListeners(this), class: cls, }; @@ -58,7 +75,7 @@ const TabBar = { RenderTabBar = ; } - return cloneElement(RenderTabBar, renderProps); + return cloneElement(RenderTabBar); }, }; diff --git a/components/tabs/tabs.jsx b/components/tabs/tabs.jsx index 2d04e94cd..933012779 100644 --- a/components/tabs/tabs.jsx +++ b/components/tabs/tabs.jsx @@ -26,12 +26,7 @@ export default { defaultActiveKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), hideAdd: PropTypes.bool.def(false), tabBarStyle: PropTypes.object, - tabBarExtraContent: PropTypes.oneOfType([ - PropTypes.string, - PropTypes.number, - PropTypes.func, - PropTypes.array, - ]), + tabBarExtraContent: PropTypes.any, destroyInactiveTabPane: PropTypes.bool.def(false), type: PropTypes.oneOf(['line', 'card', 'editable-card']), tabPosition: PropTypes.oneOf(['top', 'right', 'bottom', 'left']).def('top'),