fix: children of Tabs[type="editable-card"] cannot be falsy (#17965)

* tabs-editable-card-bugfix

if tabs type ="editable-card",if children has falsy value ,we will get error message,so we should fix it in tabs.

error:https://codesandbox.io/s/lively-glade-jmg5s

* editable-card bugfix

* tabs bugfix

* tabs-editable-card bugfix

* tab bugfix

* bugfix

* delete errorfix

* add test

components/tabs/__tests__/index.test.js

@@ -16,6 +16,9 @@ describe('Tabs', () => {
           <TabPane tab="foo" key="1">
             foo
           </TabPane>
+          {undefined}
+          {null}
+          {false}
         </Tabs>,
       );
     });
@@ -32,6 +35,10 @@ describe('Tabs', () => {
       wrapper.find('.anticon-close').simulate('click');
       expect(handleEdit).toHaveBeenCalledWith('1', 'remove');
     });
+
+    it('validateElement', () => {
+      expect(wrapper.find('.ant-tabs-tab').length).toBe(1);
+    });
   });
 
   describe('tabPosition', () => {

components/tabs/index.tsx

@@ -129,31 +129,29 @@ export default class Tabs extends React.Component<TabsProps, any> {
     let childrenWithClose: React.ReactElement<any>[] = [];
     if (type === 'editable-card') {
       childrenWithClose = [];
-      React.Children.forEach(
+      React.Children.forEach(children as React.ReactNode, (child, index) => {
-        children as React.ReactNode,
+        if (!React.isValidElement(child)) return child;
-        (child: React.ReactElement<any>, index) => {
+        let closable = child.props.closable;
-          let closable = child.props.closable;
+        closable = typeof closable === 'undefined' ? true : closable;
-          closable = typeof closable === 'undefined' ? true : closable;
+        const closeIcon = closable ? (
-          const closeIcon = closable ? (
+          <Icon
-            <Icon
+            type="close"
-              type="close"
+            className={`${prefixCls}-close-x`}
-              className={`${prefixCls}-close-x`}
+            onClick={e => this.removeTab(child.key as string, e)}
-              onClick={e => this.removeTab(child.key as string, e)}
+          />
-            />
+        ) : null;
-          ) : null;
+        childrenWithClose.push(
-          childrenWithClose.push(
+          React.cloneElement(child, {
-            React.cloneElement(child, {
+            tab: (
-              tab: (
+              <div className={closable ? undefined : `${prefixCls}-tab-unclosable`}>
-                <div className={closable ? undefined : `${prefixCls}-tab-unclosable`}>
+                {child.props.tab}
-                  {child.props.tab}
+                {closeIcon}
-                  {closeIcon}
+              </div>
-                </div>
+            ),
-              ),
+            key: child.key || index,
-              key: child.key || index,
+          }),
-            }),
+        );
-          );
+      });
-        },
-      );
       // Add new tab handler
       if (!hideAdd) {
         tabBarExtraContent = (