fix: quote in key should not cause tabs crash (#655)

Author: MadCcc

src/TabNavList/TabNode.tsx

@@ -2,6 +2,7 @@ import classNames from 'classnames';
 import KeyCode from 'rc-util/lib/KeyCode';
 import * as React from 'react';
 import type { EditableConfig, Tab } from '../interface';
+import { genDataNodeKey } from '../util';
 
 export interface TabNodeProps {
   id: string;
@@ -56,7 +57,7 @@ function TabNode({
     <div
       key={key}
       // ref={ref}
-      data-node-key={key}
+      data-node-key={genDataNodeKey(key)}
       className={classNames(tabPrefix, {
         [`${tabPrefix}-with-remove`]: removable,
         [`${tabPrefix}-active`]: active,

src/TabNavList/index.tsx

@@ -22,7 +22,7 @@ import type {
   TabsLocale,
 } from '../interface';
 import TabContext from '../TabContext';
-import { stringify } from '../util';
+import { genDataNodeKey, stringify } from '../util';
 import AddButton from './AddButton';
 import ExtraContent from './ExtraContent';
 import OperationNode from './OperationNode';
@@ -311,7 +311,7 @@ function TabNavList(props: TabNavListProps, ref: React.Ref<HTMLDivElement>) {
     setTabSizes(() => {
       const newSizes: TabSizeMap = new Map();
       tabs.forEach(({ key }) => {
-        const btnNode = tabListRef.current?.querySelector<HTMLElement>(`[data-node-key="${key}"]`);
+        const btnNode = tabListRef.current?.querySelector<HTMLElement>(`[data-node-key="${genDataNodeKey(key)}"]`);
         if (btnNode) {
           newSizes.set(key, {
             width: btnNode.offsetWidth,

src/util.ts

@@ -16,3 +16,8 @@ export function stringify<K extends string | number | symbol, V>(obj: Record<K,
 
   return JSON.stringify(tgt);
 }
+
+const RC_TABS_DOUBLE_QUOTE = 'TABS_DQ';
+export function genDataNodeKey(key: string): string {
+  return key.replace(/"/g, RC_TABS_DOUBLE_QUOTE);
+}

tests/index.test.tsx

@@ -510,4 +510,8 @@ describe('Tabs.Basic', () => {
     const { container } = render(getTabs({ tabBarStyle: { background: 'red' } }));
     expect(container.querySelector('.rc-tabs-nav')).toHaveStyle({ background: 'red' });
   });
+
+  it('key contains double quote should not crash', () => {
+    render(<Tabs items={[{key: '"key"', label: 'test'}]} />)
+  })
 });