fix: [ButtonGroup] error when buttonGroup children is invalid element #318

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

@@ -1,4 +1,5 @@
 import Button from '../index';
+import ButtonGroup from '../index';
 import { mount } from 'enzyme';
 import { BASE_CLASS_PREFIX } from '../../../semi-foundation/base/constants';
 import { IconEdit } from '@douyinfe/semi-icons';
@@ -46,4 +47,18 @@ describe('Button', () => {
         expect(elem.find(`.${BASE_CLASS_PREFIX}-button-content-left`).length).toBe(1);
         expect(elem.find(`.${BASE_CLASS_PREFIX}-button-content-right`).length).toBe(0);
     });
+
+    it(`button group with invalid child`, () => {
+        const buttonGroup = mount(
+            <ButtonGroup>
+                {false}
+                {null}
+                {undefined}
+                {1}
+                <Button>查询</Button>
+                <Button>剪切</Button>
+            </ButtonGroup>
+        );
+        expect(buttonGroup.getDOMNode().textContent).toEqual('1查询剪切');
+    });
 });

packages/semi-ui/button/_story/button.stories.js

@@ -122,6 +122,19 @@ export const ButtonGroupDemo = () => (
       </Button>
     </ButtonGroup>
     <br />
+    <div>ButtonGroup children 不是合法元素的情况:</div>
+    <ButtonGroup>
+      {false}
+      {123}
+      {null}
+      {undefined}
+      text
+      <span>span</span>
+      {true && <Button>拷贝</Button>}
+      <Button>查询</Button>
+      <Button>剪切</Button>
+    </ButtonGroup>
+    <br />
   </div>
 );
 

packages/semi-ui/button/buttonGroup.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { isValidElement, cloneElement } from 'react';
 import BaseComponent, { BaseProps } from '../_base/baseComponent';
 import PropTypes from 'prop-types';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/button/constants';
@@ -38,9 +38,11 @@ export default class ButtonGroup extends BaseComponent<ButtonGroupProps> {
         let inner;
 
         if (children) {
-            inner = ((Array.isArray(children) ? children : [children]) as React.ReactElement[]).map((itm, index) =>
-                React.cloneElement(itm, { disabled, size, type, ...itm.props, ...rest, key: index })
-            );
+            inner = ((Array.isArray(children) ? children : [children])).map((itm, index) => (
+                isValidElement(itm)
+                    ? cloneElement(itm, { disabled, size, type, ...itm.props, ...rest, key: index })
+                    : itm
+            ));
         }
         return <div className={`${prefixCls}-group`}>{inner}</div>;
     }