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

Question

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

谢谢！

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

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