fix: fix TabBar rendering as empty in SSR (#2117) (#2118)

* fix: fix TabBar rendering as empty in SSR

* chore: add tabbar test

packages/semi-ui/tabs/__test__/tabs.test.js

@@ -11,7 +11,7 @@ let ACTIVE = `.${BASE_CLASS_PREFIX}-tabs-tab-active`;
 
 function getTabs(tabProps, tabPaneProps = defaultTabPane) {
     let tabPane = tabPaneProps.map(pane => {
-        return <TabPane {...pane}></TabPane>
+        return <TabPane {...pane} key={pane.itemKey}></TabPane>
     });
     return <Tabs {...tabProps}>
         {tabPane}
@@ -205,4 +205,11 @@ describe('Tabs', () => {
         expect(demo.find(`.${BASE_CLASS_PREFIX}-tabs-tab`).length).toEqual(2)
         expect(demo.find(`.${BASE_CLASS_PREFIX}-tabs-tab`).at(0).hasClass(`${BASE_CLASS_PREFIX}-tabs-tab-active`)).toEqual(true);
     });
+
+    it('tabbar renders correctly on the first render', () => {
+        let props = {};
+        const tabs = render(getTabs(props));
+        expect(tabs.text()).toContain('titleA');
+        expect(tabs.text()).toContain('titleB');
+    });
 })

packages/semi-ui/tabs/index.tsx

@@ -77,7 +77,7 @@ class Tabs extends BaseComponent<TabsProps, TabsState> {
         this.foundation = new TabsFoundation(this.adapter);
         this.state = {
             activeKey: this.foundation.getDefaultActiveKey(),
-            panes: [],
+            panes: this.getPanes(),
             prevActiveKey: null,
             forceDisableMotion: false
         };
@@ -89,38 +89,16 @@ class Tabs extends BaseComponent<TabsProps, TabsState> {
         return {
             ...super.adapter,
             collectPane: (): void => {
-                const { tabList, children } = this.props;
-                if (Array.isArray(tabList) && tabList.length) {
-                    this.setState({ panes: tabList });
-                    return;
-                }
-                const panes = React.Children.map(children, (child: any) => {
-                    if (child) {
-                        const { tab, icon, disabled, itemKey, closable } = child.props;
-                        return { tab, icon, disabled, itemKey, closable };
-                    }
-                    return undefined;
-                });
+                const panes = this.getPanes();
                 this.setState({ panes });
             },
             collectActiveKey: (): void => {
-                let panes = [];
                 const { tabList, children, activeKey: propsActiveKey } = this.props;
                 if (typeof propsActiveKey !== 'undefined') {
                     return;
                 }
                 const { activeKey } = this.state;
-                if (Array.isArray(tabList) && tabList.length) {
-                    panes = tabList;
-                } else {
-                    panes = React.Children.map(children, (child: any) => {
-                        if (child) {
-                            const { tab, icon, disabled, itemKey, closable } = child.props;
-                            return { tab, icon, disabled, itemKey, closable };
-                        }
-                        return undefined;
-                    });
-                }
+                const panes = this.getPanes();
                 if (panes.findIndex(p => p.itemKey === activeKey) === -1) {
                     if (panes.length > 0) {
                         this.setState({ activeKey: panes[0].itemKey });
@@ -207,6 +185,20 @@ class Tabs extends BaseComponent<TabsProps, TabsState> {
         this.contentRef = { current: ref };
     };
 
+    getPanes = (): PlainTab[] => {
+        const { tabList, children } = this.props;
+        if (Array.isArray(tabList) && tabList.length) {
+            return tabList;
+        }
+        return React.Children.map(children, (child: any) => {
+            if (child) {
+                const { tab, icon, disabled, itemKey, closable } = child.props;
+                return { tab, icon, disabled, itemKey, closable };
+            }
+            return undefined;
+        });
+    };
+
     onTabClick = (activeKey: string, event: MouseEvent<HTMLDivElement>): void => {
         this.foundation.handleTabClick(activeKey, event);
     };