This commit is contained in:
诸葛龙 2019-08-20 15:58:37 +08:00 committed by 偏右
parent c8f682448e
commit f9f6e8da79
3 changed files with 59 additions and 1 deletions

View File

@ -1,6 +1,7 @@
import * as React from 'react';
import * as PropTypes from 'prop-types';
import classNames from 'classnames';
import toArray from 'rc-util/lib/Children/toArray';
import BreadcrumbItem from './BreadcrumbItem';
import BreadcrumbSeparator from './BreadcrumbSeparator';
import Menu from '../menu';
@ -47,6 +48,16 @@ function defaultItemRender(route: Route, params: any, routes: Route[], paths: st
return isLastItem ? <span>{name}</span> : <a href={`#/${paths.join('/')}`}>{name}</a>;
}
function filterFragment(children: any) {
return toArray(children).map((element: any) => {
if (React.isValidElement(element) && element.type === React.Fragment) {
const props: any = element.props;
return props.children;
}
return element;
});
}
export default class Breadcrumb extends React.Component<BreadcrumbProps, any> {
static Item: typeof BreadcrumbItem;
@ -139,7 +150,7 @@ export default class Breadcrumb extends React.Component<BreadcrumbProps, any> {
// generated by route
crumbs = this.genForRoutes(this.props);
} else if (children) {
crumbs = React.Children.map(children, (element: any, index) => {
crumbs = React.Children.map(filterFragment(children), (element: any, index) => {
if (!element) {
return element;
}

View File

@ -52,6 +52,21 @@ describe('Breadcrumb', () => {
expect(wrapper).toMatchSnapshot();
});
// https://github.com/ant-design/ant-design/issues/18260
it('filter React.Fragment', () => {
const wrapper = render(
<Breadcrumb separator="">
<Breadcrumb.Item>Location</Breadcrumb.Item>
<Breadcrumb.Separator>:</Breadcrumb.Separator>
<>
<Breadcrumb.Item href="">Application Center</Breadcrumb.Item>
<Breadcrumb.Separator />
</>
</Breadcrumb>,
);
expect(wrapper).toMatchSnapshot();
});
it('should render a menu', () => {
const routes = [
{

View File

@ -1,5 +1,37 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Breadcrumb filter React.Fragment 1`] = `
<div
class="ant-breadcrumb"
>
<span>
<span
class="ant-breadcrumb-link"
>
Location
</span>
</span>
<span
class="ant-breadcrumb-separator"
>
:
</span>
<span>
<a
class="ant-breadcrumb-link"
href=""
>
Application Center
</a>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</div>
`;
exports[`Breadcrumb should allow Breadcrumb.Item is null or undefined 1`] = `
<div
class="ant-breadcrumb"