在材质 ui Drawer 中渲染链接答案

【问题标题】：Render Link in material ui Drawer在材质 ui Drawer 中渲染链接
【发布时间】：2017-01-20 19:59:45
【问题描述】：

我想将我的 react-router 链接添加到 Drawer。我试过这个：

<Drawer width={200} open={this.state.drawerOpen} docked={false} onRequestChange={this.toggleDrawer}>
   <Link to="/businesspartners">
      <MenuItem onTouchTap={this.toggleDrawer.bind(this, false)}
                rightIcon={<CommunicationBusiness />}
      >
         Business Partners
      </MenuItem>
   </Link>
</Drawer>

我的问题是链接会呈现下划线（如下图所示）。

【问题讨论】：

标签： reactjs react-router material-ui

【解决方案1】：

我对直接使用样式也有类似的担忧，并遇到了以下答案：https://stackoverflow.com/a/48252439/522859

总而言之，使用 ListItem 上的组件属性：

<List>
   <ListItem button component={Link} to="https://www.google.com">
        <ListItemText primary="Google" />
   </ListItem>
</List>

官方文档在这里介绍：https://material-ui.com/api/list-item/

【讨论】：

太棒了！工作。

【解决方案2】：

对链接使用内联样式textDecoration: 'none'。 <Link> 被渲染为标准的 <a> 标签，这就是我们可以在那里应用 textDecoration 规则的原因。

<Drawer width={200} open={this.state.drawerOpen} docked={false} onRequestChange={this.toggleDrawer}>
   <Link to="/businesspartners" style={{ textDecoration: 'none' }}>
      <MenuItem onTouchTap={this.toggleDrawer.bind(this, false)}
                rightIcon={<CommunicationBusiness />}
      >
         Business Partners
      </MenuItem>
   </Link>
</Drawer>

【讨论】：

我知道这个解决方案。但我怀疑我是否犯了错误，因为我希望图书馆能处理它。
您不需要任何库来处理它。这是要走的路：）。 Link 属性属于 react-router 库。它的所有规范都由 react-router 处理，而 text-decoration 不是其中之一。material-ui 和 react-router 是两个独立的库。
我的意思是material-ui库

【解决方案3】：

我也遇到过同样的问题，但是由于这个问题，materialUI 中的新更新可能不起作用，从'@material-ui/core/Link'的导入链接导入有一些调整；

这样就可以了

     import Link from '@material-ui/core/Link';

     <List>
      <ListItem button component={Link} href="/dsda">
        <ListItemIcon>
          <DashboardIcon />
        </ListItemIcon>
        <ListItemText primary="DashBoard"/>
      </ListItem>
     </List>

【讨论】：