mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-02 20:19:44 +08:00
chenlong (#18340)
This commit is contained in:
parent
c8f682448e
commit
f9f6e8da79
@ -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;
|
||||
}
|
||||
|
@ -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 = [
|
||||
{
|
||||
|
@ -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"
|
||||
|
Loading…
Reference in New Issue
Block a user