react-component / react-component/menu

封装 Menu 子组件时导致的 key 不能正常传递的坑

Open
#833 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
701
Forks
266
Avg merge
4d 11h
Merged PRs (30d)
3

Description

这段代码中无论是 custom-sub-menu 还是 custom-sub-menu-inside 都没能正确的传给 Menu.SubMenu 组件,导致不能正常工作:

function CustomSubMenu(props) {
  return (
    <Menu.SubMenu key="custom-sub-menu-inside" title={<div>title</div>}>
      <Menu.Item key="item">item</Menu.Item>
    </Menu.SubMenu>
  );
}

<Menu mode="inline">
  <CustomSubMenu key="custom-sub-menu" />
</Menu>

我查了相关文档也没有找到类似问题,后面我读了源码才看到是在 https://github.com/react-component/menu/blob/master/src/utils/commonUtil.ts#L4 parseChildren 里通过 cloneElement 的方式注入了 props.eventKey 去传递的,而这个 eventKey 也没有声明在 SubMenuProps 类型里,上面的代码修复后应该是:

function CustomSubMenu(props) {
  return (
    <Menu.SubMenu eventKey="custom-sub-menu-inside" title={<div>title</div>}>
      <Menu.Item key="item">item</Menu.Item>
    </Menu.SubMenu>
  );
}

<Menu mode="inline">
  <CustomSubMenu key="custom-sub-menu" />
</Menu>

尽管现在 antdv6 已经弃用 children 但是如果有直接使用 rc-component/menu 或者老版本 antd 项目中依然可能出现此类问题,这里我提交一个 issue 希望可以给后面遇到同样问题的人解惑。

同时我对 https://github.com/react-component/menu/blob/master/src/utils/commonUtil.ts#L4 这里的实现表示不解,能否用更好的方式 refactor(比如 Context)。

Image

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the wrapped SubMenu example and read src/utils/commonUtil.ts around line 4, then inspect SubMenuProps to trace how eventKey is injected. Check the existing menu API and related implementation before deciding whether the issue needs clarification, documentation, or a refactor. Done means the key behavior and supported usage are explicitly resolved.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.