Question

我想向我的Ant Design Menu添加一个简单的文本项，例如：

<Menu>
  <Menu.Item key={to} style={style}><a href="/page1"> Page 1</a></Menu.Item>
  <Menu.Item key={to} style={style}><a href="/page2"> Page 2</a></Menu.Item>
  <span>Non clickable text</span>
</Menu>

这显示得很好，但是它在控制台中给了我很多错误：

index.js：2178警告：React无法识别subMenuKey道具在DOM元素上。如果您有意让它显示为DOM 自定义属性，则将其拼写为小写submenukey。如果你意外地从父组件传递了它，将其从DOM中删除元素。

有人对此有办法吗？我真的很喜欢Menu组件，所以不想重写自己的菜单。

Answer 1

Menu标记仅接受Menu.Item，SubMenu和Menu.ItemGroup作为子级。 Menu.Item仅接受禁用和键作为属性。除此之外，如果使用自定义html标签，则将在控制台中遇到这些错误。而且，根据蚂蚁文档，我们需要在菜单级别而不是menu.item

使用样式标签

我的建议是删除锚标记，以消除仅重定向文本的部分，或者您可以使用disable = {true}以禁用的方式显示文本。

<Menu.Item key="3"  disabled={true}>Non clickable text </Menu.Item>

Answer 2

尝试清空ItemGroup：

<Menu.ItemGroup title="Non clickable text" />

Answer 3

我必须创建带有react并使用标准标签的自定义菜单：

 <ul style={{ display: 'flex', listStyle: 'none' }}>
        <li><Link to='/'>Home</Link></li>
        <Divider
          style={{width: 0}} 
          type="vertical" />       
        <li><Link to='/books'>Books</Link></li>
        <Divider
          style={{width: 0}} 
          type="vertical"/>

      <li><Link to='/authors'>Authors</Link></li>  // clickable menu 
      <Divider
          style={{width: 0}} 
          type="vertical"/>
      <li><label>Example</label></li>   // some non-clickable text
      </ul>

如果您想使用原始菜单，那么我看到的唯一方法是在下面提到：

<Menu>
    <Menu.Item><a href="/Page1"> Page 1</a></Menu.Item>
    <Menu.Item><a href="/Page2"> Page 2</a></Menu.Item>
    <Menu.Item> some non-clickable text </Menu.Item>
</Menu>

Answer 4

如here所示，问题是您试图在菜单中包含<Divider />，并且Menu接受的子项列表有限。 <Divider />不是可接受的孩子之一。

如果删除<Divider />元素，这些警告将消失。我实际上是自己碰到的。

将引用更改为

<Menu.Divider />

然后您将成为gucci。

Answer 5

我创建了一个 custum SubMenu 组件来解决这个问题：

export interface SubMenuProp {
  className?: string;
  submenukey?: string;
  children: JSX.Element | JSX.Element[];
}

const SubMenu = (props: SubMenuProp) => {
  return <div className={props.className}>{props.children}</div>;
};

export default SubMenu;

所以你可以像这样使用它：

<Menu>
    <Menu.Item><a href="/Page1"> Page 1</a></Menu.Item>
    <Menu.Item><a href="/Page2"> Page 2</a></Menu.Item>
    <SubMenu> some non-clickable text </SubMenu>
</Menu>

普通元素出现错误消息的原因是子菜单项缺少 submenukey 属性。但是，如果我将其保留为未定义，我仍然不确定是否有任何问题。

Ant Design添加纯文本菜单项

5 个答案: