From 7001a76204dce022230ee2d6ad6747d69290bf59 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Thu, 29 Jan 2026 14:37:05 +0800 Subject: [PATCH] feat: getId should accept React.Key type Change the key parameter type from string to React.Key to support both string and number types, which matches React's key prop type. Co-Authored-By: Claude (GLM-4.7) --- src/hooks/useId.ts | 7 +++++-- tests/hooks.test.tsx | 3 +++ 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/src/hooks/useId.ts b/src/hooks/useId.ts index 1b6a0e6d..d58a9588 100644 --- a/src/hooks/useId.ts +++ b/src/hooks/useId.ts @@ -25,10 +25,13 @@ export function resetUuid() { * @param key - The key from React element, may contain spaces or invalid characters * @returns A valid HTML id string */ -export function getId(prefix: string, key: string): string { +export function getId(prefix: string, key: React.Key): string { + // React.Key can be string | number, convert to string first + const keyStr = String(key); + // Valid id characters: letters, digits, hyphen, underscore, colon, period // Replace all invalid characters (including spaces) with hyphens to preserve length - const sanitizedKey = key.replace(/[^a-zA-Z0-9_.:-]/g, '-'); + const sanitizedKey = keyStr.replace(/[^a-zA-Z0-9_.:-]/g, '-'); return `${prefix}-${sanitizedKey}`; } diff --git a/tests/hooks.test.tsx b/tests/hooks.test.tsx index 86125daa..f8004eb5 100644 --- a/tests/hooks.test.tsx +++ b/tests/hooks.test.tsx @@ -675,6 +675,9 @@ describe('hooks', () => { expect(getId('btn', 'valid-key_123:456.789')).toBe( 'btn-valid-key_123:456.789', ); + expect(getId('item', 1)).toBe('item-1'); + expect(getId('tab', 123)).toBe('tab-123'); + expect(getId('panel', 0)).toBe('panel-0'); }); });