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

Question

我使用 material-ui 组件与 react-router 进行反应。当我想显示应该作为 link 元素工作的列表项时，我遇到了问题，但其中还包含一个不应触发父级 link 的子菜单。可以，但我不知道如何禁用它。

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() 但没有成功...

谢谢！

Answer 1

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

另一个简短的提及是react-router。不幸的是，我也不喜欢它。伙计们，? ? Just look at FlowRouter 看看路线 API 应该实施得多棒。

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

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

Answer 2

对于 React Router v4，添加

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

到ListItem，而不是containerElement。

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

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

Material-UI component in React Router Link triggering the link

javascript

reactjs

react-router

material-ui