Material-ui: ListItem 有链接吗?

创建于 2015-08-13  ·  26评论  ·  资料来源: mui-org/material-ui

我正在尝试使用 Listitem 作为指向其他 url 的链接,但 Link 的属性覆盖了 ListItem 的属性
有什么解决办法吗

< ListItem primaryText = { <Link to="a" > as </Link> } />

最有用的评论

刚碰到这个。 我正在使用它并且它有效:

<ListItem button component={Link} to='/some-url'>...</ListItem>

所有26条评论

@TonyFrancis您应该能够向 ListItem 添加href属性。

@TonyFrancis收到了您对 gitter 的评论,听起来您可以使用它。 我会继续并暂时关闭它 - 如果仍有问题,请重新打开。

href需要添加到文档中

编辑:
该死的! 此问题已在 #2243 处解决。 一般来说; 从文档中不清楚所有可用的属性是什么。 这应该记录在案,以下声明没有帮助。
Other properties (no documented) are applied to the root element.
我查看了 github List 实现,但没有看到正在使用具有containerElement属性的容器组件。

根据@TonyFrancis 的回复,href 不能完全满足需要。 如果您使用的反应路由器很可能是Link组件的来源,那么您将获得一些好处,例如能够指定basename

例如,如果您有<Router basename='/my-app'>包装您的应用程序,那么

< ListItem primaryText = { <Link to="a" > as </Link> } />

将链接到my-app/a而无需到处携带basename

文档对我来说不够清楚。 嗯嗯

ListItem 的文档中没有 href 字段

刚碰到这个。 我正在使用它并且它有效:

<ListItem button component={Link} to='/some-url'>...</ListItem>

@marioacke ^ 此代码生成ul > a标记,在语义上无效,请参阅https://github.com/mui-org/material-ui/issues/7956#issuecomment -362433602

编辑:如果父级是<nav>或使用component="nav"

现在,您可以使用以下代码创建它:
``
主要文本=“文本”
容器元素={ }
/>
````

@Glaadiss Tnx,它有效

@Glaadiss标记给了我一个错误:

Warning: React does not recognize the containerElement prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase containerelement instead. If you accidentally passed it from a parent component, remove it from the DOM element.

那是因为我有一个过时的 React 或 MUI 版本吗?

@renannobile检查是否在您的组件之一中传递了不必要的{...props} 。 当我们从指南中复制粘贴时,这是一个常见的错误:P

@Glaadiss我似乎无法在 1.0.0-beta.44 上使用它

尝试过:

<List component="nav">
    <ListItem component={Link} to="/admin/user">
      <ListItemIcon>
        <PersonIcon />
      </ListItemIcon>
      <ListItemText primary="Inbox" />
    </ListItem>
    <ListItem button>
      <ListItemIcon>
        <DraftsIcon />
      </ListItemIcon>
      <ListItemText primary="Drafts" />
    </ListItem>
  </List>

上述情况有效,但没有连锁反应,它导致a以 div 作为子项,这是非法的。

<List component="nav">
    <ListItem primaryText="Inbox" component={Link} to="/admin/user">
      <ListItemIcon>
        <PersonIcon />
      </ListItemIcon>
    </ListItem>
    <ListItem button>
      <ListItemIcon>
        <DraftsIcon />
      </ListItemIcon>
      <ListItemText primary="Drafts" />
    </ListItem>
  </List>

上述情况有效,但没有涟漪效应,它导致项目没有可见文本。

<List component="nav">
    <ListItem primaryText="Inbox" containerElement={<Link to="/admin/user" />}>
      <ListItemIcon>
        <PersonIcon />
      </ListItemIcon>
    </ListItem>
    <ListItem button>
      <ListItemIcon>
        <DraftsIcon />
      </ListItemIcon>
      <ListItemText primary="Drafts" />
    </ListItem>
  </List>

上述案例显示了 HTML 中 containerElement 的 [object Object] 属性。

<List component="nav">
    <ListItem ContainerComponent={() => <Link to="/admin/user" />}>
      <ListItemIcon>
        <PersonIcon />
      </ListItemIcon>
      <ListItemText primary="Inbox" />
    </ListItem>
    <ListItem button>
      <ListItemIcon>
        <DraftsIcon />
      </ListItemIcon>
      <ListItemText primary="Drafts" />
    </ListItem>
  </List>
<List component="nav">
    <ListItem ContainerComponent={Link to="/admin/user" />}>
      <ListItemIcon>
        <PersonIcon />
      </ListItemIcon>
      <ListItemText primary="Inbox" />
    </ListItem>
    <ListItem button>
      <ListItemIcon>
        <DraftsIcon />
      </ListItemIcon>
      <ListItemText primary="Drafts" />
    </ListItem>
  </List>



md5-7ff35357efa037d9c88356d4d3bf14ad



<List component="nav">
    <ListItem ContainerComponent={Link} ContainerProps={{ to: '/admin/user' }}>
      <ListItemIcon>
        <PersonIcon />
      </ListItemIcon>
      <ListItemText primary="Inbox" />
    </ListItem>
    <ListItem button>
      <ListItemIcon>
        <DraftsIcon />
      </ListItemIcon>
      <ListItemText primary="Drafts" />
    </ListItem>
  </List>

啊! 解决办法是这样的。

<List component="nav">
    <ListItem component={Link} to="/admin/user" button>
      <ListItemIcon>
        <PersonIcon />
      </ListItemIcon>
      <ListItemText primary="Inbox" />
    </ListItem>
    <ListItem button>
      <ListItemIcon>
        <DraftsIcon />
      </ListItemIcon>
      <ListItemText primary="Drafts" />
    </ListItem>
  </List>

@mschipperheyn这有效,但它与涟漪效应

您好,有关如何正确执行此操作的任何更新?

这对我有用,包括涟漪:

<ListItem button component={
  ({ children, ...props }) =>
    <Link to="/" {...props as LinkProps}>
      {children}
    </Link>
}>

以下方法对我有用,因为它能够保留原始样式和 flex 行为。

<ListItem component={props => (
  <ListItem button>
    <Link style={{
      position: "absolute",
      top: 0,
      left: 0,
      right: 0,
      bottom: 0
    }}
    to={"/"}>
    </Link>
    {props.children}
  </ListItem>
)}>
    <ListItemIcon>
      <ArrowForwardIcon/>
    </ListItemIcon>
    <ListItemText primary="List Item" />
</ListItem>

对于 Next.js 用户:

<List component="nav">
  <Link href="/admin/resources" passHref>
    <ListItem component="a" button>
      <ListItemIcon>
        <InboxIcon />
      </ListItemIcon>
      <ListItemText primary="Resources" />
    </ListItem>
  </Link>
  ...

这似乎很明显 - 但如果您不需要使用<Link/>并且可以使用<a> (即 - 您没有获得您正在编写的 SPA 的优势),您可以这样做:

<a href="/yourlink">
  <ListItem
    button
  >
    <ListItemText primary="Your Link Text" />
  </ListItem>
</a>

默认情况下,如果target="_blank" Eslint 应该需要rel="noopener noreferrer" target="_blank"

              <List>
                <a
                  href="https://fb.me/xxxxxxxxx"
                  target="_blank"
                  rel="noopener noreferrer"
                  className={classes.hrefLink}
                >
                  <ListItem button>
                    <ListItemIcon>
                      <ThumbUp className={classes.icon32} />
                    </ListItemIcon>
                    <ListItemText primary="Visit our Facebook Page" secondary="@xxxxxxxxxx" />
                  </ListItem>
                </a>
              </List>

这适用于 v4:

    <ListItem button to={to} component={Link}>
      {children}
    </ListItem>

这是我的方法,使用内置的Mui-selected类:

<ListItem
  button
  component={NavLink}
  activeClassName={"Mui-selected"}
  to={"/some-url"}
  exact
>
  ...
</ListItem>

链接不适用于 ListItem 请帮助我 antone

@gautam751 请分享您的代码或存储库,以便人们可以帮助您

刚碰到这个。 我正在使用它并且它有效:

<ListItem button component={Link} to='/some-url'>...</ListItem>

为我工作,谢谢
但实际上我是这样使用它的:

<ListItem button component={Link} to="/SomePath">
       ...
</ListItem>
此页面是否有帮助?
0 / 5 - 0 等级

相关问题

nathanmarks picture nathanmarks  ·  100评论

Bessonov picture Bessonov  ·  93评论

chadobado picture chadobado  ·  119评论

darkowic picture darkowic  ·  62评论

kybarg picture kybarg  ·  164评论