mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-08-06 16:06:28 +08:00
Code Issues Actions 17 Packages Projects Releases Wiki Activity

docs: Update Menu faq

Browse Source
This commit is contained in:
zombiej 2021-06-22 11:22:20 +08:00
parent f4380689f6
commit e2cc3b4720
2 changed files with 40 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
components/menu/index.en-US.md
View File

@ -14,6 +14,9 @@ Navigation is an important part of any website, as a good navigation setup allow
More layouts with navigation: [Layout](/components/layout).
- Menu render as `ul` element. So it only support [`li` and `script-supporting` elements](https://html.spec.whatwg.org/multipage/grouping-content.html#the-ul-element) as children node。Your customize node should wrapped by `Menu.Item`.
- Menu need collect node structure. So it's children node should be `Menu.*` or HOC which used by it.
## API
```jsx
@ -55,13 +58,13 @@ More layouts with navigation: [Layout](/components/layout).
### Menu.Item
| Param | Description | Type | Default value | Version |
| --- | --- | --- | --- | --- |
| danger | Display the danger style | boolean | false | 4.3.0 |
| disabled | Whether menu item is disabled | boolean | false | |
| icon | The icon of the menu item | ReactNode | - | 4.2.0 |
| key | Unique ID of the menu item | string | - | |
| title | Set display title for collapsed item | string | - | |
| Param | Description | Type | Default value | Version |
| -------- | ------------------------------------ | --------- | ------------- | ------- |
| danger | Display the danger style | boolean | false | 4.3.0 |
| disabled | Whether menu item is disabled | boolean | false | |
| icon | The icon of the menu item | ReactNode | - | 4.2.0 |
| key | Unique ID of the menu item | string | - | |
| title | Set display title for collapsed item | string | - | |
> Note: `icon` is a newly added prop in `4.2.0`. For previous versions, please use the following method to define the icon.
>
@ -97,11 +100,17 @@ More layouts with navigation: [Layout](/components/layout).
### Menu.ItemGroup
| Param | Description | Type | Default value | Version |
| --- | --- | --- | --- | --- |
| children | Sub-menu items | MenuItem\[] | - | |
| title | The title of the group | ReactNode | - | |
| Param | Description | Type | Default value | Version |
| -------- | ---------------------- | ----------- | ------------- | ------- |
| children | Sub-menu items | MenuItem\[] | - | |
| title | The title of the group | ReactNode | - | |
### Menu.Divider
Divider line in between menu items, only used in vertical popup Menu or Dropdown Menu.
## FAQ
### Why Menu children node will render twice?
Menu collect structure info with [twice-render](https://github.com/react-component/menu/blob/f4684514096d6b7123339cbe72e7b0f68db0bce2/src/Menu.tsx#L543) to support HOC usage. Merge into one render may cause the logic much complex, welcome contribute to help improve collection logic.

31
components/menu/index.zh-CN.md
View File

@ -15,6 +15,9 @@ cover: https://gw.alipayobjects.com/zos/alicdn/3XZcjGpvK/Menu.svg
更多布局和导航的使用可以参考：[通用布局](/components/layout)。
- Menu 元素为 `ul`，因而仅支持 [`li` 以及 `script-supporting` 子元素](https://html.spec.whatwg.org/multipage/grouping-content.html#the-ul-element)。因而你的子节点元素应该都在 `Menu.Item` 内使用。
- Menu 需要计算节点结构，因而其子元素仅支持 `Menu.*` 以及对此进行封装的 HOC 组件。
## API
```jsx
@ -56,13 +59,13 @@ cover: https://gw.alipayobjects.com/zos/alicdn/3XZcjGpvK/Menu.svg
### Menu.Item
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| danger | 展示错误状态样式 | boolean | false | 4.3.0 |
| disabled | 是否禁用 | boolean | false | |
| icon | 菜单图标 | ReactNode | - | 4.2.0 |
| key | item 的唯一标志 | string | - | |
| title | 设置收缩时展示的悬浮标题 | string | - | |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| -------- | ------------------------ | --------- | ------ | ----- |
| danger | 展示错误状态样式 | boolean | false | 4.3.0 |
| disabled | 是否禁用 | boolean | false | |
| icon | 菜单图标 | ReactNode | - | 4.2.0 |
| key | item 的唯一标志 | string | - | |
| title | 设置收缩时展示的悬浮标题 | string | - | |
> 注意：`icon` 是 `4.2.0` 新增的属性，之前的版本请使用下面的方式定义图标。
>
@ -98,11 +101,17 @@ cover: https://gw.alipayobjects.com/zos/alicdn/3XZcjGpvK/Menu.svg
### Menu.ItemGroup
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| children | 分组的菜单项 | MenuItem\[] | - | |
| title | 分组标题 | ReactNode | - | |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| -------- | ------------ | ----------- | ------ | ---- |
| children | 分组的菜单项 | MenuItem\[] | - | |
| title | 分组标题 | ReactNode | - | |
### Menu.Divider
菜单项分割线，只用在弹出菜单内。
## FAQ
### 为何 Menu 的子元素会渲染两次？
Menu 通过[二次渲染](https://github.com/react-component/menu/blob/f4684514096d6b7123339cbe72e7b0f68db0bce2/src/Menu.tsx#L543)收集嵌套结构信息以支持 HOC 的结构。合并成一个推导结构会使得逻辑变得十分复杂，欢迎 PR 以协助改进该设计。