javascript - 将 React Semantic-UI Menu.Item 包裹在 anchor 标记中而不破坏其样式

Question

我有一个 React Semantic Ui 菜单，它必须链接到另一个页面。 我试图用 anchor 标签包裹它，但这完全破坏了菜单按钮上的样式。在假设这是一个但是之前，我想先想想我做错了什么。

这就是我的代码当前的样子:

<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>

在使用 a 标签包装 Menu.Item 之前，它当前的样子是这样的:

用 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>