在锚标记中包装 React Semantic-UI Menu.Item 而不会破坏它的样式答案

【问题标题】：Wrap React Semantic-UI Menu.Item in anchor tag without ruining it styles在锚标记中包装 React Semantic-UI Menu.Item 而不会破坏它的样式
【发布时间】：2018-07-25 13:56:24
【问题描述】：

我有一个 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>

在用a 标记包装Menu.Item 之前，它现在的样子是这样的：

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

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

【问题讨论】：

标签： javascript reactjs semantic-ui semantic-ui-react

【解决方案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>

【讨论】：

在发布问题后最终发现，我想我已经完全过时了。谢谢！