Question

以下关于onClick动画的混乱（ListItem变为红色）：

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

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

Answer 1

与＆＃34; react-router-dom＆＃34;

一起使用

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

示例基于此部分：docs

Answer 2

实现此目的的最简单方法是使用ListItem道具使component成为链接：

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

这样，ListItem将成为链接到所需位置的锚标记，但仍然会收到适当的样式，以便不会有任何视觉变化。

component道具的行为记录在案here。请注意，href道具将自动传递给锚标记，如道具文档中的最后一行所指定的那样：

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

Answer 3

我遇到了同样的问题，但可能由于这个原因在 materialUI 中的新更新不起作用，有一些调整作为 import from import Link from '@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>

Render Link in material ui Drawer

Answer 4

import React, { forwardRef } from "react";
// material-ui components
import ListItem from "@material-ui/core/ListItem";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemText from "@material-ui/core/ListItemText";
// react-router
import { Link as RouterLink } from "react-router-dom";
const ListItemLink = (props) => {
  const { icon, primary, to } = props;

  const renderLink = React.useMemo(
    () =>
      forwardRef((itemProps, ref) => (
        <RouterLink to={to} ref={ref} {...itemProps} />
      )),
    [to]
  );

  return (
    <>
      <ListItem button component={renderLink}>
        {icon ? <ListItemIcon>{icon}</ListItemIcon> : null}
        <ListItemText primary={primary} />
      </ListItem>
    </>
  );
};

export default ListItemLink;

它实际上在文档中可用。

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

4 个答案: