React路由器链接中的材质-UI组件触发链接

Question

我使用的材料-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()，但没有成功.

谢谢!

Answer 1

首先，我想承认，我不喜欢材料-ui，因此不推荐给那些考虑用它开始一个项目的人。背后的理由是，您牺牲了太多的时间定制组件，以您的需要-一个解决方案是相反的想法，反应。它还使用内联样式，这些样式总是必须在组件文件中覆盖，而不是在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>

Answer 2

对于React路由器v4，添加

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

到ListItem，而不是containerElement。

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