我正在尝试使用 Listitem 作为指向其他 url 的链接,但 Link 的属性覆盖了 ListItem 的属性
有什么解决办法吗
< ListItem primaryText = { <Link to="a" > as </Link> } />
@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>
最有用的评论
刚碰到这个。 我正在使用它并且它有效: