在不破坏样式的情况下将 React Semantic-UI Menu.Item 包裹在锚标记中

Question

我有一个 React 语义 Ui 菜单，它必须 link 到另一个页面。我试图用锚标记包装它，但这完全破坏了菜单按钮上的样式。在假设它是但是之前，我想认为我做错了什么。

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

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

在不破坏样式的情况下将 React Semantic-UI Menu.Item 包裹在锚标记中

Wrap React Semantic-UI Menu.Item in anchor tag without ruining it styles

javascript

reactjs

semantic-ui

semantic-ui-react