如何在material-ui 1.0中添加一个List的链接？

Question

使用onClick动画进行以下混乱(ListItem变为红色):

<List>
  <a href="https://www.google.com">
    <ListItem button>
       <ListItemText primary="Google" />
     </ListItem>
   </a>
 </List>

在ListItem中添加链接时,只有单击ListItemText才能使转换工作,这不是我想要的.添加链接的正确方法是什么？

Answer 1

与"react-router-dom"一起使用

import { Link } from "react-router-dom";
<ListItem button component={Link} to="/design">

该示例基于此部分:docs

Answer 2

完成此任务的最简单方法是ListItem使用componentprop 创建一个链接:

<List>
  <ListItem button component="a" href="https://www.google.com">
    <ListItemText primary="Google" />
  </ListItem>
</List>

这样,ListItem将是一个链接到所需位置的锚标记,但仍然会收到适当的样式,以便不会有任何视觉变化.

此处component记录了道具的行为.请注意,prop将自动传递给锚标记,如props文档中的最后一行所指定:href

提供的任何其他属性将传播到根元素.