语义 UI (React)：如何在 Menu.List 元素中使用链接组件

Posted 2023-02-21

【中文标题】语义 UI (React)：如何在 Menu.List 元素中使用链接组件

【英文标题】：Semantic UI (React): How to use Link components in Menu.List elements

【发布时间】：2017-06-24 04:23:52

【问题描述】：

我正在尝试获取一个语义 ui (react) 菜单列表，它应该与 react 路由器一起使用，这意味着我想使用 react router 的 Link 组件

如果我用这个...

<Menu.Item name='profile'>
    <Icon name='user' />
    My profile
</Menu.Item>

...它给了我结果：

<a class="item">
    <i aria-hidden="true" class="user icon"></i>
    My profile
</a>

但我想得到类似的东西

<Link to='profile'>
    <i aria-hidden="true" class="user icon"></i>
    My profile
</Link>

这个不行，因为语法错误：

<Menu.Item name='profile' as= <Link to='profile' /> >
    <Icon name='user' />
    My profile
</Menu.Item>

【参考方案1】：

您需要使用 SUIR 的augmentation:

<Menu.Item as= Link  name='profile' to='profile'>
  <Icon name='user' />
  My profile
</Menu.Item>

【讨论】：

这也适用于 Button Like <Button as=Link to='/'>Home</Button>

同意这是最好的答案。更少的代码并允许您保留主题样式。

请注意：由于 API 已更改，“我的个人资料”（字符串）需要包含在标签内。像这样我的个人资料

太好了，谢谢！知道如何传递方法吗？我需要在我的链接中包含 DELETE 方法

【参考方案2】：

请改用browserHistory.push；它也由react-router 提供，作为Link 的替代品，但非标记：

import browserHistory from 'react-router';

redirect(to) 
    browserHistory.push(
       pathname: to
    );
 
//......
<Menu.Item name="profile" onClick=this.redirect('/profile')
    <Icon name='user' />
    My profile
</Menu.Item>

如果你想从name props 中得到/profile，改行：

<Menu.Item name="profile" onClick=(event, itemProps) => this.redirect(itemProps.name)

如果是这样，<Menu onItemClick=... > 比 <Menu.item onClick=... > 更好

【讨论】：

使用browserHistory.push( pathname: to );和browserHistory.push(to);有区别吗？

它支持both 但是，如果你想传递query 以及其他参数，pathname:to 更好