From 1a9d76933fa68f6798b29672e7230deb60710609 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?=
 =?UTF-8?q?=E5=8D=9C?= <smith3816@gmail.com>
Date: Thu, 4 Aug 2022 10:35:24 +0800
Subject: [PATCH] refactor: Tabs use `items` instead of jsx node (#562)

* chore: basic refactor

* docs: more example

* docs: more example

* docs: more and more

* docs: rest demo

* chore: connect props

* test: All test case convert

* chore: adjust ts comiple

* test: coverage
---
 docs/examples/basic.tsx                  |  43 +++++----
 docs/examples/editable.tsx               |  21 +++--
 docs/examples/extra.tsx                  |  19 ++--
 docs/examples/mix.tsx                    |  32 ++++---
 docs/examples/overflow.tsx               |  16 ++--
 docs/examples/position.tsx               |  55 ++++++-----
 docs/examples/renderTabBar-dragable.tsx  |  54 ++++++-----
 docs/examples/renderTabBar-sticky.tsx    |  35 ++++---
 docs/examples/renderTabBar-use-panes.tsx |  35 ++++---
 src/TabNavList/OperationNode.tsx         |   6 +-
 src/TabNavList/TabNode.tsx               |  10 +-
 src/TabNavList/Wrapper.tsx               |  30 ++++++
 src/TabNavList/index.tsx                 |   3 +-
 src/TabPanelList/index.tsx               |  24 ++---
 src/Tabs.tsx                             |  53 ++++-------
 src/index.ts                             |   6 +-
 src/interface.ts                         |   8 +-
 tests/common/util.tsx                    |  50 ++++++----
 tests/index.test.tsx                     | 115 ++++++++++++++++-------
 tests/mobile.test.tsx                    |  25 ++---
 tests/operation-overflow.test.tsx        |   2 +-
 tests/overflow.test.tsx                  |  38 +++++---
 tests/rtl.test.tsx                       |   2 +-
 23 files changed, 403 insertions(+), 279 deletions(-)
 create mode 100644 src/TabNavList/Wrapper.tsx

diff --git a/docs/examples/basic.tsx b/docs/examples/basic.tsx
index c92eed9f..f92b79f9 100644
--- a/docs/examples/basic.tsx
+++ b/docs/examples/basic.tsx
@@ -1,19 +1,26 @@
 import React from 'react';
-import Tabs, { TabPane } from 'rc-tabs';
+import Tabs from 'rc-tabs';
 import '../../assets/index.less';
 
 export default () => {
   const [destroy, setDestroy] = React.useState(false);
-  const [children, setChildren] = React.useState([
-    <TabPane key="light" tab="light">
-      Light
-    </TabPane>,
-    <TabPane key="bamboo" tab="bamboo">
-      Bamboo
-    </TabPane>,
-    <TabPane key="cute" tab="cute" disabled>
-      Cute
-    </TabPane>,
+  const [items, setItems] = React.useState([
+    {
+      label: 'Light',
+      key: 'light',
+      children: 'Light!',
+    },
+    {
+      label: 'Bamboo',
+      key: 'bamboo',
+      children: 'Bamboo!',
+    },
+    {
+      label: 'Cute',
+      key: 'cute',
+      children: 'Cute!',
+      disabled: true,
+    },
   ]);
 
   if (destroy) {
@@ -22,16 +29,16 @@ export default () => {
 
   return (
     <React.StrictMode>
-      <Tabs tabBarExtraContent="extra">
-        {children}
-      </Tabs>
+      <Tabs tabBarExtraContent="extra" items={items} />
       <button
         type="button"
         onClick={() => {
-          setChildren([
-            <TabPane key="Yo" tab="yo">
-              Yo!
-            </TabPane>,
+          setItems([
+            {
+              key: 'yo',
+              label: 'Yo',
+              children: 'Yo!',
+            },
           ]);
         }}
       >
diff --git a/docs/examples/editable.tsx b/docs/examples/editable.tsx
index f4b128ee..87fe8eb8 100644
--- a/docs/examples/editable.tsx
+++ b/docs/examples/editable.tsx
@@ -1,5 +1,5 @@
 import React, { useRef } from 'react';
-import Tabs, { TabPane } from 'rc-tabs';
+import Tabs from 'rc-tabs';
 import '../../assets/index.less';
 
 export default () => {
@@ -37,15 +37,16 @@ export default () => {
 
   return (
     <div style={{ maxWidth: 550 }}>
-      <Tabs editable={editable} defaultActiveKey="8" moreIcon="...">
-        {tabs.map(({ key, content }) => {
-          return (
-            <TabPane key={key} tab={`Tab ${key}`}>
-              {content}
-            </TabPane>
-          );
-        })}
-      </Tabs>
+      <Tabs
+        editable={editable}
+        defaultActiveKey="8"
+        moreIcon="..."
+        items={tabs.map(({ key, content }) => ({
+          key,
+          label: `tab ${key}`,
+          children: content,
+        }))}
+      />
     </div>
   );
 };
diff --git a/docs/examples/extra.tsx b/docs/examples/extra.tsx
index 1a4e8603..4289b586 100644
--- a/docs/examples/extra.tsx
+++ b/docs/examples/extra.tsx
@@ -1,15 +1,16 @@
 import React from 'react';
-import Tabs, { TabPane } from 'rc-tabs';
+import Tabs from 'rc-tabs';
+import type { TabsProps } from 'rc-tabs';
 import '../../assets/index.less';
 
-const tabs: React.ReactElement[] = [];
+const items: TabsProps['items'] = [];
 
 for (let i = 0; i < 50; i += 1) {
-  tabs.push(
-    <TabPane key={i} tab={`Tab ${i}`}>
-      Content of {i}
-    </TabPane>,
-  );
+  items.push({
+    key: String(i),
+    label: `Tab ${i}`,
+    children: `Content of ${i}`,
+  });
 }
 
 type P = 'default' | 'left' | 'right';
@@ -103,9 +104,7 @@ export default () => {
 
   return (
     <div style={{ maxWidth: 550 }}>
-      <Tabs tabBarExtraContent={extra} defaultActiveKey="8" moreIcon="...">
-        {tabs}
-      </Tabs>
+      <Tabs tabBarExtraContent={extra} defaultActiveKey="8" moreIcon="..." items={items} />
       <div style={{ display: 'flex' }}>
         <div>
           <input
diff --git a/docs/examples/mix.tsx b/docs/examples/mix.tsx
index 79693c60..88d24e16 100644
--- a/docs/examples/mix.tsx
+++ b/docs/examples/mix.tsx
@@ -1,17 +1,20 @@
 import React from 'react';
-import Tabs, { TabPane } from 'rc-tabs';
+import Tabs from 'rc-tabs';
+import type { TabsProps } from 'rc-tabs';
 import '../../assets/index.less';
 
 function getTabPanes(count = 50) {
-  const tabs: React.ReactElement[] = [];
+  const items: TabsProps['items'] = [];
   for (let i = 0; i < count; i += 1) {
-    tabs.push(
-      <TabPane key={i} tab={`Tab ${i}`} disabled={i === 3} closable={i === 5 ? false : undefined}>
-        Content of {i}
-      </TabPane>,
-    );
+    items.push({
+      key: String(i),
+      label: `Tab ${i}`,
+      disabled: i === 3,
+      closable: i === 5 ? false : undefined,
+      children: `Content of ${i}`,
+    });
   }
-  return tabs;
+  return items;
 }
 
 export default () => {
@@ -40,9 +43,11 @@ export default () => {
               const num = Number(lastTab.key) + 1;
               return [
                 ...tabs,
-                <TabPane key={num} tab={`Tab ${num}`}>
-                  Content of {num}
-                </TabPane>,
+                {
+                  key: String(num),
+                  label: `Tab ${num}`,
+                  children: `Content of ${num}`,
+                },
               ];
             });
           }
@@ -161,9 +166,8 @@ export default () => {
             moreIcon="..."
             // moreTransitionName="233"
             style={{ height: fixHeight ? 300 : null }}
-          >
-            {tabPanes}
-          </Tabs>
+            items={tabPanes}
+          />
         </React.StrictMode>
       )}
     </div>
diff --git a/docs/examples/overflow.tsx b/docs/examples/overflow.tsx
index 42e58133..ff49b1bb 100644
--- a/docs/examples/overflow.tsx
+++ b/docs/examples/overflow.tsx
@@ -1,15 +1,12 @@
 import React from 'react';
-import Tabs, { TabPane } from 'rc-tabs';
+import Tabs from 'rc-tabs';
+import type { TabsProps } from 'rc-tabs';
 import '../../assets/index.less';
 
-const tabs: React.ReactElement[] = [];
+const items: TabsProps['items'] = [];
 
 for (let i = 0; i < 200; i += 1) {
-  tabs.push(
-    <TabPane key={i} tab={`Tab ${i}`}>
-      Content of {i}
-    </TabPane>,
-  );
+  items.push({ key: String(i), label: `Tab ${i}`, children: `Content of ${i}` });
 }
 
 export default () => {
@@ -29,9 +26,8 @@ export default () => {
             tabBarExtraContent="extra"
             defaultActiveKey="8"
             moreIcon="..."
-          >
-            {tabs}
-          </Tabs>
+            items={items}
+          />
         </div>
       </React.StrictMode>
 
diff --git a/docs/examples/position.tsx b/docs/examples/position.tsx
index 1e2da338..9203a87d 100644
--- a/docs/examples/position.tsx
+++ b/docs/examples/position.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import Tabs, { TabPane } from 'rc-tabs';
+import Tabs from 'rc-tabs';
 import '../../assets/index.less';
 
 export default () => {
@@ -32,26 +32,39 @@ export default () => {
         tabPosition={position}
         style={{ height: fixedHeight ? 180 : undefined }}
         tabBarGutter={gutter ? 16 : null}
-      >
-        <TabPane key="light" tab="light">
-          Light
-        </TabPane>
-        <TabPane key="bamboo" tab="bamboo">
-          Bamboo
-        </TabPane>
-        <TabPane key="cat" tab="cat">
-          Cat
-        </TabPane>
-        <TabPane key="miu" tab="miu">
-          Miu
-        </TabPane>
-        <TabPane key="333" tab="333">
-          3333
-        </TabPane>
-        <TabPane key="4444" tab="4444">
-          4444
-        </TabPane>
-      </Tabs>
+        items={[
+          {
+            key: 'light',
+            label: 'Light',
+            children: 'Light!',
+          },
+          {
+            key: 'bamboo',
+            label: 'Bamboo',
+            children: 'Bamboo!',
+          },
+          {
+            key: 'cat',
+            label: 'Cat',
+            children: 'Cat!',
+          },
+          {
+            key: 'miu',
+            label: 'Miu',
+            children: 'Miu!',
+          },
+          {
+            key: '333',
+            label: '333',
+            children: '333!',
+          },
+          {
+            key: '444',
+            label: '444',
+            children: '444!',
+          },
+        ]}
+      />
     </React.StrictMode>
   );
 };
diff --git a/docs/examples/renderTabBar-dragable.tsx b/docs/examples/renderTabBar-dragable.tsx
index 4494b2d3..fa28a043 100644
--- a/docs/examples/renderTabBar-dragable.tsx
+++ b/docs/examples/renderTabBar-dragable.tsx
@@ -2,10 +2,9 @@ import React from 'react';
 import { DndProvider, DragSource, DropTarget } from 'react-dnd';
 import HTML5Backend from 'react-dnd-html5-backend';
 import Tabs from 'rc-tabs';
+import type { TabsProps } from 'rc-tabs';
 import '../../assets/index.less';
 
-const { TabPane } = Tabs;
-
 // Drag & Drop node
 class TabNode extends React.Component<any, any> {
   render() {
@@ -47,18 +46,18 @@ const WrapTabNode = DropTarget('DND_NODE', cardTarget, connect => ({
   }))(TabNode),
 );
 
-class DraggableTabs extends React.Component {
+class DraggableTabs extends React.Component<TabsProps> {
   state = {
     order: [],
   };
 
   moveTabNode = (dragKey, hoverKey) => {
     const newOrder = this.state.order.slice();
-    const { children } = this.props;
+    const { items } = this.props;
 
-    React.Children.forEach(children, (c: React.ReactElement) => {
-      if (newOrder.indexOf(c.key) === -1) {
-        newOrder.push(c.key);
+    items.forEach(item => {
+      if (newOrder.indexOf(item.key) === -1) {
+        newOrder.push(item.key);
       }
     });
 
@@ -87,12 +86,9 @@ class DraggableTabs extends React.Component {
 
   render() {
     const { order } = this.state;
-    const { children } = this.props;
+    const { items } = this.props;
 
-    const tabs = [];
-    React.Children.forEach(children, c => {
-      tabs.push(c);
-    });
+    const tabs = [...items];
 
     const orderTabs = tabs.slice().sort((a, b) => {
       const orderA = order.indexOf(a.key);
@@ -116,24 +112,30 @@ class DraggableTabs extends React.Component {
 
     return (
       <DndProvider backend={HTML5Backend}>
-        <Tabs renderTabBar={this.renderTabBar} {...this.props}>
-          {orderTabs}
-        </Tabs>
+        <Tabs renderTabBar={this.renderTabBar} {...this.props} items={orderTabs} />
       </DndProvider>
     );
   }
 }
 
 export default () => (
-  <DraggableTabs>
-    <TabPane tab="tab 1" key="1">
-      Content of Tab Pane 1
-    </TabPane>
-    <TabPane tab="tab 2" key="2">
-      Content of Tab Pane 2
-    </TabPane>
-    <TabPane tab="tab 3" key="3">
-      Content of Tab Pane 3
-    </TabPane>
-  </DraggableTabs>
+  <DraggableTabs
+    items={[
+      {
+        key: '1',
+        label: 'tab 1',
+        children: 'Content of Tab Pane 1',
+      },
+      {
+        key: '2',
+        label: 'tab 2',
+        children: 'Content of Tab Pane 2',
+      },
+      {
+        key: '3',
+        label: 'tab 3',
+        children: 'Content of Tab Pane 3',
+      },
+    ]}
+  />
 );
diff --git a/docs/examples/renderTabBar-sticky.tsx b/docs/examples/renderTabBar-sticky.tsx
index a325c084..cd5008ed 100644
--- a/docs/examples/renderTabBar-sticky.tsx
+++ b/docs/examples/renderTabBar-sticky.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { StickyContainer, Sticky } from 'react-sticky';
-import Tabs, { TabPane } from 'rc-tabs';
+import Tabs from 'rc-tabs';
 import '../../assets/index.less';
 
 const renderTabBar = (props, DefaultTabBar) => (
@@ -19,17 +19,28 @@ export default () => {
   return (
     <div style={{ height: 2000 }}>
       <StickyContainer>
-        <Tabs defaultActiveKey="1" renderTabBar={renderTabBar}>
-          <TabPane tab="Tab 1" key="1" style={{ height: 200 }}>
-            Content of Tab Pane 1
-          </TabPane>
-          <TabPane tab="Tab 2" key="2">
-            Content of Tab Pane 2
-          </TabPane>
-          <TabPane tab="Tab 3" key="3">
-            Content of Tab Pane 3
-          </TabPane>
-        </Tabs>
+        <Tabs
+          defaultActiveKey="1"
+          renderTabBar={renderTabBar}
+          items={[
+            {
+              key: '1',
+              label: 'Tab 1',
+              style: { height: 200 },
+              children: 'Content of Tab Pane 1',
+            },
+            {
+              key: '2',
+              label: 'Tab 2',
+              children: 'Content of Tab Pane 2',
+            },
+            {
+              key: '3',
+              label: 'Tab 3',
+              children: 'Content of Tab Pane 3',
+            },
+          ]}
+        />
       </StickyContainer>
     </div>
   );
diff --git a/docs/examples/renderTabBar-use-panes.tsx b/docs/examples/renderTabBar-use-panes.tsx
index 7120f377..6cad1aa5 100644
--- a/docs/examples/renderTabBar-use-panes.tsx
+++ b/docs/examples/renderTabBar-use-panes.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import Tabs, { TabPane } from 'rc-tabs';
+import Tabs from 'rc-tabs';
 import '../../assets/index.less';
 
 const renderTabBar = props => {
@@ -16,17 +16,28 @@ const renderTabBar = props => {
 export default () => {
   return (
     <div style={{ height: 2000 }}>
-      <Tabs defaultActiveKey="1" renderTabBar={renderTabBar}>
-        <TabPane tab="Tab 1" key="1" style={{ height: 200 }}>
-          Content of Tab Pane 1
-        </TabPane>
-        <TabPane tab="Tab 2" key="2">
-          Content of Tab Pane 2
-        </TabPane>
-        <TabPane tab="Tab 3" key="3">
-          Content of Tab Pane 3
-        </TabPane>
-      </Tabs>
+      <Tabs
+        defaultActiveKey="1"
+        renderTabBar={renderTabBar}
+        items={[
+          {
+            key: '1',
+            label: 'Tab 1',
+            style: { height: 200 },
+            children: 'Content of Tab Pane 1',
+          },
+          {
+            key: '2',
+            label: 'Tab 2',
+            children: 'Content of Tab Pane 2',
+          },
+          {
+            key: '3',
+            label: 'Tab 3',
+            children: 'Content of Tab Pane 3',
+          },
+        ]}
+      />
     </div>
   );
 };
diff --git a/src/TabNavList/OperationNode.tsx b/src/TabNavList/OperationNode.tsx
index ade347db..c6fa8fdc 100644
--- a/src/TabNavList/OperationNode.tsx
+++ b/src/TabNavList/OperationNode.tsx
@@ -15,7 +15,7 @@ export interface OperationNodeProps {
   tabs: Tab[];
   rtl: boolean;
   tabBarGutter?: number;
-  activeKey: string;
+  activeKey: React.Key;
   mobile: boolean;
   moreIcon?: React.ReactNode;
   moreTransitionName?: string;
@@ -59,7 +59,7 @@ function OperationNode(
 
   const dropdownAriaLabel = locale?.dropdownAriaLabel;
 
-  function onRemoveTab(event: React.MouseEvent | React.KeyboardEvent, key: string) {
+  function onRemoveTab(event: React.MouseEvent | React.KeyboardEvent, key: React.Key) {
     event.preventDefault();
     event.stopPropagation();
     editable.onEdit('remove', {
@@ -93,7 +93,7 @@ function OperationNode(
             disabled={tab.disabled}
           >
             {/* {tab.tab} */}
-            <span>{tab.tab}</span>
+            <span>{tab.label}</span>
             {removable && (
               <button
                 type="button"
diff --git a/src/TabNavList/TabNode.tsx b/src/TabNavList/TabNode.tsx
index b9aa7b55..a8a2ade7 100644
--- a/src/TabNavList/TabNode.tsx
+++ b/src/TabNavList/TabNode.tsx
@@ -25,7 +25,7 @@ function TabNode(
     prefixCls,
     id,
     active,
-    tab: { key, tab, disabled, closeIcon },
+    tab: { key, label, disabled, closeIcon },
     closable,
     renderWrapper,
     removeAriaLabel,
@@ -80,11 +80,11 @@ function TabNode(
         aria-controls={id && `${id}-panel-${key}`}
         aria-disabled={disabled}
         tabIndex={disabled ? null : 0}
-        onClick={(e) => {
+        onClick={e => {
           e.stopPropagation();
           onInternalClick(e);
         }}
-        onKeyDown={(e) => {
+        onKeyDown={e => {
           if ([KeyCode.SPACE, KeyCode.ENTER].includes(e.which)) {
             e.preventDefault();
             onInternalClick(e);
@@ -92,7 +92,7 @@ function TabNode(
         }}
         onFocus={onFocus}
       >
-        {tab}
+        {label}
       </div>
 
       {/* Remove Button */}
@@ -102,7 +102,7 @@ function TabNode(
           aria-label={removeAriaLabel || 'remove'}
           tabIndex={0}
           className={`${tabPrefix}-remove`}
-          onClick={(e) => {
+          onClick={e => {
             e.stopPropagation();
             onRemoveTab(e);
           }}
diff --git a/src/TabNavList/Wrapper.tsx b/src/TabNavList/Wrapper.tsx
new file mode 100644
index 00000000..e3fc9f20
--- /dev/null
+++ b/src/TabNavList/Wrapper.tsx
@@ -0,0 +1,30 @@
+// zombieJ: To compatible with `renderTabBar` usage.
+
+import TabNavList from '.';
+import type { TabNavListProps } from '.';
+import { useContext } from 'react';
+import TabContext from '../TabContext';
+import TabPane from '../TabPanelList/TabPane';
+
+export type TabNavListWrapperProps = Required<Omit<TabNavListProps, 'children' | 'className'>> &
+  TabNavListProps;
+
+// We have to create a TabNavList components.
+export default function TabNavListWrapper({ renderTabBar, ...restProps }: TabNavListWrapperProps) {
+  const { tabs } = useContext(TabContext);
+
+  if (renderTabBar) {
+    const tabNavBarProps = {
+      ...restProps,
+
+      // Legacy support. We do not use this actually
+      panes: tabs.map(({ label, key, ...restTabProps }) => (
+        <TabPane tab={label} key={key} tabKey={key} {...restTabProps} />
+      )),
+    };
+
+    return renderTabBar(tabNavBarProps, TabNavList);
+  }
+
+  return <TabNavList {...restProps} />;
+}
diff --git a/src/TabNavList/index.tsx b/src/TabNavList/index.tsx
index 90d0da9f..22237264 100644
--- a/src/TabNavList/index.tsx
+++ b/src/TabNavList/index.tsx
@@ -31,7 +31,6 @@ export interface TabNavListProps {
   tabPosition: TabPosition;
   activeKey: string;
   rtl: boolean;
-  panes: React.ReactNode;
   animated?: AnimatedConfig;
   extra?: TabBarExtraContent;
   editable?: EditableConfig;
@@ -43,7 +42,7 @@ export interface TabNavListProps {
   className?: string;
   style?: React.CSSProperties;
   locale?: TabsLocale;
-  onTabClick: (activeKey: string, e: React.MouseEvent | React.KeyboardEvent) => void;
+  onTabClick: (activeKey: React.Key, e: React.MouseEvent | React.KeyboardEvent) => void;
   onTabScroll?: OnTabScroll;
   children?: (node: React.ReactElement) => React.ReactElement;
   getPopupContainer?: (node: HTMLElement) => HTMLElement;
diff --git a/src/TabPanelList/index.tsx b/src/TabPanelList/index.tsx
index ac1d0a9d..b9fd013b 100644
--- a/src/TabPanelList/index.tsx
+++ b/src/TabPanelList/index.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import classNames from 'classnames';
 import TabContext from '../TabContext';
 import type { TabPosition, AnimatedConfig } from '../interface';
+import TabPane from './TabPane';
 
 export interface TabPanelListProps {
   activeKey: React.Key;
@@ -37,17 +38,18 @@ export default function TabPanelList({
             : null
         }
       >
-        {tabs.map(tab => {
-          return React.cloneElement(tab.node, {
-            key: tab.key,
-            prefixCls,
-            tabKey: tab.key,
-            id,
-            animated: tabPaneAnimated,
-            active: tab.key === activeKey,
-            destroyInactiveTabPane,
-          });
-        })}
+        {tabs.map(tab => (
+          <TabPane
+            {...tab}
+            prefixCls={prefixCls}
+            id={id}
+            tabKey={tab.key}
+            animated={tabPaneAnimated}
+            active={tab.key === activeKey}
+            destroyInactiveTabPane={destroyInactiveTabPane}
+            key={tab.key}
+          />
+        ))}
       </div>
     </div>
   );
diff --git a/src/Tabs.tsx b/src/Tabs.tsx
index 0709781b..20308e7d 100644
--- a/src/Tabs.tsx
+++ b/src/Tabs.tsx
@@ -2,13 +2,9 @@
 import * as React from 'react';
 import { useEffect, useState } from 'react';
 import classNames from 'classnames';
-import toArray from 'rc-util/lib/Children/toArray';
 import isMobile from 'rc-util/lib/isMobile';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
-import TabNavList from './TabNavList';
 import TabPanelList from './TabPanelList';
-import type { TabPaneProps } from './TabPanelList/TabPane';
-import TabPane from './TabPanelList/TabPane';
 import type {
   TabPosition,
   RenderTabBar,
@@ -20,6 +16,7 @@ import type {
   TabBarExtraContent,
 } from './interface';
 import TabContext from './TabContext';
+import TabNavListWrapper from './TabNavList/Wrapper';
 
 /**
  * Should added antd:
@@ -34,13 +31,15 @@ import TabContext from './TabContext';
 // Used for accessibility
 let uuid = 0;
 
-export interface TabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+export interface TabsProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'children'> {
   prefixCls?: string;
   className?: string;
   style?: React.CSSProperties;
-  children?: React.ReactNode;
   id?: string;
 
+  items?: Tab[];
+
   activeKey?: string;
   defaultActiveKey?: string;
   direction?: 'ltr' | 'rtl';
@@ -70,29 +69,12 @@ export interface TabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'o
   popupClassName?: string;
 }
 
-function parseTabList(children: React.ReactNode): Tab[] {
-  return toArray(children)
-    .map((node: React.ReactElement<TabPaneProps>) => {
-      if (React.isValidElement(node)) {
-        const key = node.key !== undefined ? String(node.key) : undefined;
-        return {
-          key,
-          ...node.props,
-          node,
-        };
-      }
-
-      return null;
-    })
-    .filter(tab => tab);
-}
-
 function Tabs(
   {
     id,
     prefixCls = 'rc-tabs',
     className,
-    children,
+    items,
     direction,
     activeKey,
     defaultActiveKey,
@@ -119,7 +101,10 @@ function Tabs(
   }: TabsProps,
   ref: React.Ref<HTMLDivElement>,
 ) {
-  const tabs = parseTabList(children);
+  const tabs = React.useMemo(
+    () => (items || []).filter(item => item && typeof item === 'object' && 'key' in item),
+    [items],
+  );
   const rtl = direction === 'rtl';
 
   let mergedAnimated: AnimatedConfig | false;
@@ -218,17 +203,11 @@ function Tabs(
     onTabScroll,
     extra: tabBarExtraContent,
     style: tabBarStyle,
-    panes: children,
+    panes: null,
     getPopupContainer,
     popupClassName,
   };
 
-  if (renderTabBar) {
-    tabNavBar = renderTabBar(tabNavBarProps, TabNavList);
-  } else {
-    tabNavBar = <TabNavList {...tabNavBarProps} />;
-  }
-
   return (
     <TabContext.Provider value={{ tabs, prefixCls }}>
       <div
@@ -247,6 +226,7 @@ function Tabs(
         {...restProps}
       >
         {tabNavBar}
+        <TabNavListWrapper {...tabNavBarProps} renderTabBar={renderTabBar} />
         <TabPanelList
           destroyInactiveTabPane={destroyInactiveTabPane}
           {...sharedProps}
@@ -258,9 +238,8 @@ function Tabs(
 }
 
 const ForwardTabs = React.forwardRef(Tabs);
+if (process.env.NODE_ENV !== 'production') {
+  ForwardTabs.displayName = 'Tabs';
+}
 
-export type ForwardTabsType = typeof ForwardTabs & { TabPane: typeof TabPane };
-
-(ForwardTabs as ForwardTabsType).TabPane = TabPane;
-
-export default ForwardTabs as ForwardTabsType;
+export default ForwardTabs;
diff --git a/src/index.ts b/src/index.ts
index 093043a4..53020ae1 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,10 +1,6 @@
 import Tabs from './Tabs';
 import type { TabsProps } from './Tabs';
-import TabPane from './TabPanelList/TabPane';
-import type { TabPaneProps } from './TabPanelList/TabPane'
 
-export type { TabsProps, TabPaneProps };
-
-export { TabPane }
+export type { TabsProps };
 
 export default Tabs;
diff --git a/src/interface.ts b/src/interface.ts
index da75b642..b1db8278 100644
--- a/src/interface.ts
+++ b/src/interface.ts
@@ -1,3 +1,4 @@
+import type React from 'react';
 import type { TabNavListProps } from './TabNavList';
 import type { TabPaneProps } from './TabPanelList/TabPane';
 
@@ -17,9 +18,9 @@ export type TabOffsetMap = Map<React.Key, TabOffset>;
 
 export type TabPosition = 'left' | 'right' | 'top' | 'bottom';
 
-export interface Tab extends TabPaneProps {
+export interface Tab extends Omit<TabPaneProps, 'tab'> {
   key: string;
-  node: React.ReactElement;
+  label: React.ReactNode;
 }
 
 type RenderTabBarProps = {
@@ -38,6 +39,7 @@ type RenderTabBarProps = {
   onTabScroll: OnTabScroll;
   extra: TabBarExtraContent;
   style: React.CSSProperties;
+  /** @deprecated It do not pass real TabPane node. Only for compatible usage.  */
   panes: React.ReactNode;
 };
 
@@ -55,7 +57,7 @@ export interface TabsLocale {
 export interface EditableConfig {
   onEdit: (
     type: 'add' | 'remove',
-    info: { key?: string; event: React.MouseEvent | React.KeyboardEvent },
+    info: { key?: React.Key; event: React.MouseEvent | React.KeyboardEvent },
   ) => void;
   showAdd?: boolean;
   removeIcon?: React.ReactNode;
diff --git a/tests/common/util.tsx b/tests/common/util.tsx
index 104158fa..3dda597c 100644
--- a/tests/common/util.tsx
+++ b/tests/common/util.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-invalid-this */
 import React from 'react';
 import type { ReactWrapper } from 'enzyme';
-import Tabs, { TabPane } from '../../src';
+import Tabs from '../../src';
 import type { TabsProps } from '../../src/Tabs';
 
 export function getOffsetSizeFunc(
@@ -65,23 +65,37 @@ export function getTransformY(wrapper: ReactWrapper) {
 
 export function getTabs(props: TabsProps = null) {
   return (
-    <Tabs {...props}>
-      <TabPane tab="light" key="light">
-        Light
-      </TabPane>
-      <TabPane tab="bamboo" key="bamboo">
-        Bamboo
-      </TabPane>
-      <TabPane tab="cute" key="cute">
-        Cute
-      </TabPane>
-      <TabPane tab="disabled" key="disabled" disabled>
-        Disabled
-      </TabPane>
-      <TabPane tab="miu" key="miu">
-        Miu
-      </TabPane>
-    </Tabs>
+    <Tabs
+      {...props}
+      items={[
+        {
+          label: 'light',
+          key: 'light',
+          children: 'Light',
+        },
+        {
+          label: 'bamboo',
+          key: 'bamboo',
+          children: 'Bamboo',
+        },
+        {
+          label: 'cute',
+          key: 'cute',
+          children: 'Cute',
+        },
+        {
+          label: 'disabled',
+          key: 'disabled',
+          children: 'Disabled',
+          disabled: true,
+        },
+        {
+          label: 'miu',
+          key: 'miu',
+          children: 'Miu',
+        },
+      ]}
+    />
   );
 }
 
diff --git a/tests/index.test.tsx b/tests/index.test.tsx
index 8f70fb20..042bfcc0 100644
--- a/tests/index.test.tsx
+++ b/tests/index.test.tsx
@@ -2,22 +2,28 @@ import React from 'react';
 import type { ReactWrapper } from 'enzyme';
 import { mount } from 'enzyme';
 import KeyCode from 'rc-util/lib/KeyCode';
-import Tabs, { TabPane } from '../src';
+import Tabs from '../src';
 import type { TabsProps } from '../src/Tabs';
 
 describe('Tabs.Basic', () => {
   function getTabs(props: TabsProps = null) {
     const mergedProps = {
-      children: [
-        <TabPane tab="light" key="light">
-          Light
-        </TabPane>,
-        <TabPane tab="bamboo" key="bamboo">
-          Bamboo
-        </TabPane>,
-        <TabPane tab="cute" key="cute">
-          Cute
-        </TabPane>,
+      items: [
+        {
+          label: 'light',
+          key: 'light',
+          children: 'Light',
+        },
+        {
+          label: 'bamboo',
+          key: 'bamboo',
+          children: 'Bamboo',
+        },
+        {
+          label: 'cute',
+          key: 'cute',
+          children: 'Cute',
+        },
       ],
       ...props,
     };
@@ -31,14 +37,42 @@ describe('Tabs.Basic', () => {
     expect(wrapper.render()).toMatchSnapshot();
   });
 
+  it('disabled not change', () => {
+    const onChange = jest.fn();
+
+    const wrapper = mount(
+      getTabs({
+        defaultActiveKey: 'light',
+        items: [
+          {
+            label: 'light',
+            key: 'light',
+            children: 'Light',
+          },
+          {
+            label: 'disabled',
+            key: 'disabled',
+            children: 'Disabled',
+            disabled: true,
+          },
+        ],
+      }),
+    );
+
+    wrapper.find('.rc-tabs-tab-disabled').simulate('click');
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
   it('Skip invalidate children', () => {
     const wrapper = mount(
       getTabs({
-        children: [
-          <TabPane tab="light" key="light">
-            Light
-          </TabPane>,
-          'not me',
+        items: [
+          {
+            label: 'light',
+            key: 'light',
+            children: 'Light',
+          },
+          'not me' as any,
         ],
       }),
     );
@@ -48,7 +82,7 @@ describe('Tabs.Basic', () => {
   });
 
   it('nothing for empty tabs', () => {
-    mount(getTabs({ children: null }));
+    mount(getTabs({ items: null }));
   });
 
   describe('onChange and onTabClick should work', () => {
@@ -97,11 +131,13 @@ describe('Tabs.Basic', () => {
   it('active first tab when children is changed', () => {
     const wrapper = mount(getTabs());
     wrapper.setProps({
-      children: (
-        <TabPane tab="Yo" key="2333">
-          New
-        </TabPane>
-      ),
+      items: [
+        {
+          label: 'Yo',
+          key: '2333',
+          children: 'New',
+        },
+      ],
     });
     wrapper.update();
     expect(wrapper.find('.rc-tabs-tab-active').text()).toEqual('Yo');
@@ -112,11 +148,13 @@ describe('Tabs.Basic', () => {
     expect(wrapper.find('.rc-tabs-tab-active').text()).toEqual('light');
 
     wrapper.setProps({
-      children: (
-        <TabPane tab="Yo" key="2333">
-          New
-        </TabPane>
-      ),
+      items: [
+        {
+          label: 'Yo',
+          key: '2333',
+          children: 'New',
+        },
+      ],
     });
     expect(wrapper.find('.rc-tabs-tab-active')).toHaveLength(0);
   });
@@ -169,7 +207,16 @@ describe('Tabs.Basic', () => {
       getTabs({
         activeKey: 'light',
         destroyInactiveTabPane: true,
-        children: [<TabPane key="light">Light</TabPane>, <TabPane key="bamboo">Bamboo</TabPane>],
+        items: [
+          {
+            key: 'light',
+            children: 'Light',
+          },
+          {
+            key: 'bamboo',
+            children: 'Bamboo',
+          },
+        ] as any,
       }),
     );
 
@@ -233,11 +280,13 @@ describe('Tabs.Basic', () => {
       const wrapper = mount(
         getTabs({
           editable: { onEdit },
-          children: [
-            <TabPane tab="light" closeIcon={<span className="close-light" />}>
-              Light
-            </TabPane>,
-          ],
+          items: [
+            {
+              key: 'light',
+              closeIcon: <span className="close-light" />,
+              children: 'Light',
+            },
+          ] as any,
         }),
       );
 
diff --git a/tests/mobile.test.tsx b/tests/mobile.test.tsx
index 4fbe21c2..1bbe4eb4 100644
--- a/tests/mobile.test.tsx
+++ b/tests/mobile.test.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
-import { mount, ReactWrapper } from 'enzyme';
+import { mount } from 'enzyme';
+import type { ReactWrapper } from 'enzyme';
 import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
 import { act } from 'react-dom/test-utils';
-import Tabs, { TabPane } from '../src';
-import { TabsProps } from '../src/Tabs';
+import Tabs from '../src';
+import type { TabsProps } from '../src';
 import { getTransformX } from './common/util';
 
 describe('Tabs.Mobile', () => {
@@ -25,16 +26,16 @@ describe('Tabs.Mobile', () => {
   const tabCount = 100;
 
   function getTabs(props: TabsProps = null) {
-    const children: React.ReactElement[] = [];
+    const items: TabsProps['items'] = [];
     for (let i = 0; i < tabCount; i += 1) {
-      children.push(
-        <TabPane tab={i} key={i}>
-          {i}
-        </TabPane>,
-      );
+      items.push({
+        label: i,
+        key: String(i),
+        children: i,
+      });
     }
 
-    return <Tabs {...props}>{children}</Tabs>;
+    return <Tabs {...props} items={items} />;
   }
 
   describe('mobile is scrollable', () => {
@@ -55,7 +56,7 @@ describe('Tabs.Mobile', () => {
           get() {
             // Mock button offset
             const btn = this as HTMLButtonElement;
-            const btnList = [...btn.parentNode.childNodes].filter(ele =>
+            const btnList = Array.from(btn.parentNode.childNodes).filter(ele =>
               (ele as HTMLElement).className.includes('rc-tabs-tab'),
             );
             const index = btnList.indexOf(btn);
@@ -101,7 +102,7 @@ describe('Tabs.Mobile', () => {
       });
 
       // Touch to move
-      const node = (wrapper.find('.rc-tabs-nav-wrap').instance() as unknown) as HTMLElement;
+      const node = wrapper.find('.rc-tabs-nav-wrap').instance() as unknown as HTMLElement;
 
       act(() => {
         const touchStart = new TouchEvent('touchstart', {
diff --git a/tests/operation-overflow.test.tsx b/tests/operation-overflow.test.tsx
index aac79540..dd347d5d 100644
--- a/tests/operation-overflow.test.tsx
+++ b/tests/operation-overflow.test.tsx
@@ -15,7 +15,7 @@ describe('Tabs.Operation-Overflow', () => {
 
     function btnOffsetPosition() {
       const btn = this as HTMLButtonElement;
-      const btnList = [...btn.parentNode.childNodes].filter(ele =>
+      const btnList = Array.from(btn.parentNode.childNodes).filter(ele =>
         (ele as HTMLElement).className.includes('rc-tabs-tab'),
       );
       const index = btnList.indexOf(btn);
diff --git a/tests/overflow.test.tsx b/tests/overflow.test.tsx
index af322dcb..94491826 100644
--- a/tests/overflow.test.tsx
+++ b/tests/overflow.test.tsx
@@ -10,7 +10,8 @@ import {
   getTransformY,
   triggerResize,
 } from './common/util';
-import Tabs, { TabPane } from '../src';
+import type { TabsProps } from '../src';
+import Tabs from '../src';
 
 describe('Tabs.Overflow', () => {
   let domSpy: ReturnType<typeof spyElementPrototypes>;
@@ -209,7 +210,17 @@ describe('Tabs.Overflow', () => {
         hackOffsetInfo.list = 20;
 
         jest.useFakeTimers();
-        const wrapper = mount(getTabs({ children: [<TabPane key="yo">Yo</TabPane>], tabPosition }));
+        const wrapper = mount(
+          getTabs({
+            items: [
+              {
+                key: 'yo',
+                children: 'Yo',
+              } as any,
+            ],
+            tabPosition,
+          }),
+        );
 
         triggerResize(wrapper);
         act(() => {
@@ -358,31 +369,28 @@ describe('Tabs.Overflow', () => {
       console.log('run here');
       jest.useFakeTimers();
 
-      let children = new Array(8).fill(0).map((_, index) => {
-        return (
-          <TabPane key={index} tab={`Tab ${index + 1}`}>
-            {`Tab Content${index + 1}`}
-          </TabPane>
-        );
-      });
+      let items: TabsProps['items'] = new Array(8).fill(0).map((_, index) => ({
+        key: `${index}`,
+        label: `Tab ${index + 1}`,
+        children: `Tab Content${index + 1}`,
+      }));
 
       const wrapper = mount(
         <Tabs
           editable={{
             onEdit(type, { key }) {
               if (type === 'remove') {
-                children = children.filter(ele => {
+                items = items.filter(ele => {
                   return ele.key !== key.toString();
                 });
                 wrapper.setProps({
-                  children,
+                  items,
                 });
               }
             },
           }}
-        >
-          {children}
-        </Tabs>,
+          items={items}
+        />,
       );
 
       triggerResize(wrapper);
@@ -437,7 +445,7 @@ describe('Tabs.Overflow', () => {
   it('should support getPopupContainer', () => {
     const getPopupContainer = trigger => trigger.parentNode;
     const wrapper = mount(getTabs({ getPopupContainer }));
-    expect(wrapper.find('Trigger').first().props().getPopupContainer).toBe(getPopupContainer);
+    expect(wrapper.find('Trigger').first().prop('getPopupContainer')).toBe(getPopupContainer);
   });
 
   it('should support popupClassName', () => {
diff --git a/tests/rtl.test.tsx b/tests/rtl.test.tsx
index 614400ba..83b9a378 100644
--- a/tests/rtl.test.tsx
+++ b/tests/rtl.test.tsx
@@ -28,7 +28,7 @@ describe('Tabs.RTL', () => {
         get() {
           // Mock button offset
           const btn = this as HTMLButtonElement;
-          const btnList = [...btn.parentNode.childNodes].filter(ele =>
+          const btnList = Array.from(btn.parentNode.childNodes).filter(ele =>
             (ele as HTMLElement).className.includes('rc-tabs-tab'),
           );
           const index = btnList.indexOf(btn);