ant-design Menu 的 key typescript 支持 number 类型，但是传入 number 类型时，onSelect 时参数 key 是 string 类型

pkln4tw6 于 4个月前发布在 TypeScript

关注(0)|答案(5)|浏览(158)

Reproduction link

Steps to reproduce

1、点击前两个 item
2、查看控制台 e.key 类型

What is expected?

1、e.key 是 number 类型

What is actually happening?

2、e.key 都是 string 类型
| Environment | Info |
| ------------ | ------------ |
| antd | 5.15.2 |
| React | latest |
| System | mac |
| Browser | chrome |

官网文档中显示 key 为 string 类型，但是 typescript 支持 number 类型。

ant-design

来源：https://github.com/ant-design/ant-design/issues/47837

5条答案

按热度按时间

uurity8g1#

Start a new pull request in StackBlitz Codeflow .

react-sljqyb (Open reproduction)

赞(0）回复(0）举报 4个月前

w8biq8rn2#

@chenyuf2 hi，MenuItem 的 key 允许是 React.Key，那么就包含了 string | number 类型，不应该只允许 string 类型，这个问题个人认为应该在 rc-menu 中去解决，问题的原因：

items 转 JSX 表达式时，所有的 key 都变成了 string 类型。https://github.com/react-component/menu/blob/4ae012f8276b9ac41182e030980d7dbc65ae3563/src/utils/nodeUtil.tsx#L60-L62 ，控制台查看 JSX 表达式的 key 类型： https://stackblitz.com/edit/vitejs-vite-hfxqfp?file=src%2FApp.tsx
parseChildren 使用了 string 类型的 key 赋值给了 eventKey 所以输出的 key 都是 string 类型。 https://github.com/react-component/menu/blob/4ae012f8276b9ac41182e030980d7dbc65ae3563/src/utils/commonUtil.ts#L9-L11

TODO: openKeys、selectedKeys 和 onSelect 的 key 类型都应该是 React.Key

赞(0）回复(0）举报 4个月前

pxy2qtax3#

@chenyuf2 hi，MenuItem 的 key 允许是 React.Key，那么就包含了 string | number 类型，不应该只允许 string 类型，这个问题个人认为应该在 rc-menu 中去解决，问题的原因：

items 转 JSX 表达式时，所有的 key 都变成了 string 类型。https://github.com/react-component/menu/blob/4ae012f8276b9ac41182e030980d7dbc65ae3563/src/utils/nodeUtil.tsx#L60-L62 ，控制台查看 JSX 表达式的 key 类型： https://stackblitz.com/edit/vitejs-vite-hfxqfp?file=src%2FApp.tsx
parseChildren 使用了 string 类型的 key 赋值给了 eventKey 所以输出的 key 都是 string 类型。 https://github.com/react-component/menu/blob/4ae012f8276b9ac41182e030980d7dbc65ae3563/src/utils/commonUtil.ts#L9-L11

TODO: openKeys、selectedKeys 和 onSelect 的 key 类型都应该是 React.Key

很多antd的文档写的都是string为key，但是其实都是React.Key 作为Key，比如Table组件

赞(0）回复(0）举报 4个月前

hmae6n7t4#

是的，但文档中 string 是没问题的，React.Key 可能会有问题，可以让 key 的类型支持 React.Key 🙈

赞(0）回复(0）举报 4个月前

ryoqjall5#

可能 breaking change，需要在 major 修复

赞(0）回复(0）举报 4个月前