将React Semantic-UI Menu.Item包装在锚标签中而不破坏其样式

Question

我有一个React Semantic Ui菜单，该菜单必须链接到另一个页面。 我正在尝试用锚标记包装它，但这完全破坏了菜单按钮上的样式。我想以为我在做错某事之前就做错了。

这是我的代码当前的样子：

<Menu tabular attached='top'>
   <a href={item1Url}><Menu.Item link>item1</Menu.Item></a>
   <a href={item2Url}><Menu.Item active link>Item 2</Menu.Item></a>
</Menu>

在用Menu.Item标签包裹a之前，这是当前的样子：

用a标签包裹起来，看起来像这样：

更不用说当我将鼠标悬停在它上时它会完全消失。我在做错什么吗？

Answer 1

如果您查看the doc，则可以将href（和target）属性直接添加到Menu.Item元素中。

对于您而言，结果将是：

<Menu tabular attached='top'>
   <Menu.Item href="item1Url">item1</Menu.Item></a>
   <Menu.Item href="item2Url"active>Item 2</Menu.Item></a>
</Menu>