React Router Link 中的 Material-UI 组件触发链接

Posted 2023-02-21

【中文标题】React Router Link 中的 Material-UI 组件触发链接

【英文标题】：Material-UI component in React Router Link triggering the link

【发布时间】：2017-03-15 23:41:18

【问题描述】：

我在 react-router 中使用 material-ui 组件。当我想显示应该作为链接元素工作的列表项时，我遇到了一个问题，但其中还包含一个不应触发父链接的子菜单。确实如此，但我不知道如何禁用它。

var iconMenu =
    <IconMenu iconButtonElement=<IconButton><MoreVertIcon /></IconButton>>
      <MenuItem primaryText='change name' onTouchTap=this.edit/>
      <MenuItem primaryText='delete' onTouchTap=this.delete />
    </IconMenu>


<ListItem
          key=i
          containerElement=<Link to=`/items/$item.id` />
          rightIconButton=iconMenu
/>

当我单击iconMenu 按钮时，我不希望<Link to=`/items/$item.id` /> 被触发，所以我留在页面中。但确实如此。那么我该如何解决这个问题呢？我尝试添加事件处理程序来运行stopPropagation()，但没有成功...

谢谢！

【问题讨论】：

你必须使用<Link>吗？也许，作为一种解决方法，您可以使用在激活 ListItem onTouchTap 和 navigate programatically using React Router

时调用的函数

@CésarLandesa 不是。但我们之前使用过它，这会导致一些其他相关问题......

【参考方案1】：

对于 React Router v4，添加

onTouchTap=() => this.props.history.push(`/items/$item.id`)

到ListItem，而不是containerElement。

使用import withRouter from 'react-router-dom' 和export default withRouter(Foo) 将history 添加到组件的props。

【参考方案2】：

首先，我要承认我不喜欢material-ui，因此不推荐给考虑使用它开始项目的人。背后的原因是您牺牲了太多时间来定制组件以满足您的需求——这种解决方案与 React 的想法相反。它还使用你总是必须在组件文件中覆盖的内联样式，而不是在你的 scss 或更少。这很糟糕。我什至没有提到所有使用 JS 处理的 UI 交互操作，这些操作可能会使您的性能受到影响。

另一个简短的提及是react-router。不幸的是，我也不是它的粉丝。伙计们，why do you change the API in every next release？ Why is it so damn difficult to just reset the location queries?看看FlowRouter，看看应该实现一个多么棒的路由API。

无论如何，我的解决方案是在<Link /> 组件周围实现一个包装器，并将<IconMenu /> 移到<Link /> 包装器之外：

<li key=i>
  <ListItem
          key=i
          containerElement=<Link to=`/items/$item.id` />
  />
  iconMenu
</li>

【讨论】：

why do you change the API in every next release? 欢迎来到 JS 世界。

那么material-ui的替代品有哪些呢？要求：库应组件丰富，组件设计应统一

@chenop 对于material-ui v1.0，您应该使用：component=Link to=`/items/$item.id`，而不是使用containerElement 引用组件。见：material-ui-1dab0.firebaseapp.com/component-demos/buttons