diff --git a/components/breadcrumb/Breadcrumb.tsx b/components/breadcrumb/Breadcrumb.tsx index b291aca37f..1f3689b6a4 100755 --- a/components/breadcrumb/Breadcrumb.tsx +++ b/components/breadcrumb/Breadcrumb.tsx @@ -46,9 +46,9 @@ export type ItemType = Partial; export type InternalRouteType = Partial; -export interface BreadcrumbProps { +export interface BreadcrumbProps = any> { prefixCls?: string; - params?: any; + params?: T; separator?: React.ReactNode; style?: React.CSSProperties; className?: string; @@ -60,19 +60,13 @@ export interface BreadcrumbProps { items?: ItemType[]; - itemRender?: ( - route: ItemType, - params: any, - routes: ItemType[], - paths: string[], - ) => React.ReactNode; + itemRender?: (route: ItemType, params: T, routes: ItemType[], paths: string[]) => React.ReactNode; } -const getPath = (params: any, path?: string) => { +const getPath = = any>(params: T, path?: string) => { if (path === undefined) { return path; } - let mergedPath = (path || '').replace(/^\//, ''); Object.keys(params).forEach((key) => { mergedPath = mergedPath.replace(`:${key}`, params[key]!); @@ -80,7 +74,7 @@ const getPath = (params: any, path?: string) => { return mergedPath; }; -const Breadcrumb = (props: BreadcrumbProps) => { +const Breadcrumb = = any>(props: BreadcrumbProps) => { const { prefixCls: customizePrefixCls, separator = '/', @@ -113,7 +107,7 @@ const Breadcrumb = (props: BreadcrumbProps) => { // generated by route const paths: string[] = []; - const itemRenderRoutes: any = items || legacyRoutes; + const itemRenderRoutes = items || legacyRoutes; crumbs = mergedItems.map((item, index) => { const { @@ -168,7 +162,7 @@ const Breadcrumb = (props: BreadcrumbProps) => { onClick={onClick} prefixCls={prefixCls} > - {mergedItemRender(item as BreadcrumbItemType, params, itemRenderRoutes, paths, href)} + {mergedItemRender(item, params, itemRenderRoutes!, paths, href)} ); }); diff --git a/components/breadcrumb/BreadcrumbItem.tsx b/components/breadcrumb/BreadcrumbItem.tsx index 0cb432e1b8..820d409ba0 100644 --- a/components/breadcrumb/BreadcrumbItem.tsx +++ b/components/breadcrumb/BreadcrumbItem.tsx @@ -37,7 +37,7 @@ export interface BreadcrumbItemProps extends SeparatorType { overlay?: DropdownProps['overlay']; } -export const InternalBreadcrumbItem = (props: BreadcrumbItemProps) => { +export const InternalBreadcrumbItem: React.FC = (props) => { const { prefixCls, separator = '/', children, menu, overlay, dropdownProps, href } = props; // Warning for deprecated usage @@ -103,11 +103,15 @@ export const InternalBreadcrumbItem = (props: BreadcrumbItemProps) => { return null; }; -const BreadcrumbItem = (props: BreadcrumbItemProps) => { +type CompoundedComponent = React.FC & { + /** @internal */ + __ANT_BREADCRUMB_ITEM: boolean; +}; + +const BreadcrumbItem: CompoundedComponent = (props) => { const { prefixCls: customizePrefixCls, children, href, ...restProps } = props; const { getPrefixCls } = React.useContext(ConfigContext); const prefixCls = getPrefixCls('breadcrumb', customizePrefixCls); - return ( {renderItem(prefixCls, restProps as ItemType, children, href)} diff --git a/components/breadcrumb/__tests__/Breadcrumb.test.tsx b/components/breadcrumb/__tests__/Breadcrumb.test.tsx index eb00b0f6ed..ccebb91521 100644 --- a/components/breadcrumb/__tests__/Breadcrumb.test.tsx +++ b/components/breadcrumb/__tests__/Breadcrumb.test.tsx @@ -384,4 +384,19 @@ describe('Breadcrumb', () => { ); expect(document.querySelector('.ant-dropdown')).toBeTruthy(); }); + + it('Breadcrumb params type test', () => { + interface Params { + key1?: number; + key2?: string; + } + expect( + + params={{ + key1: 1, + key2: 'test', + }} + />, + ).toBeTruthy(); + }); });