如何解决如何通过Fluent UI Nav正确使用到达路由器链接
是否有一种方法可以使Fluent UI(以前称为Office Fabric UI)Nav组件正常工作,而将其<a>
元素链接替换为自定义链接(例如,到达路由器的<Link>
)?
Fluent UI Nav提供了onRenderLink
道具,但是仅更改了最里面<a>
元素的内部内容。它将外部包裹元素保留为传统的<a>
,当用户使用它时会导致整个页面重新呈现。
它还提供了linkAs
道具,但是改变了“组头”的全部内容,并采取了首先使用Nav
的所有CSS样式优点。 / p>
有没有办法使它真正起作用?
解决方法
我做了一些谷歌搜索,发现这个使用LinkAs
的codepen:
(props) => {
return <Link className={props.className} style={{color: 'inherit',boxSizing: 'border-box'}} to={props.href}>
<span style={{display: 'flex'}}>
{ !!props.iconProps && <Icon style={{margin: '0 4px'}} {...props.iconProps} /> }
{props.children}
</span>
</Link> ;
}
有点令人失望的是,您基本上必须对其CSS进行反向工程并自己进行渲染才能使之正常工作。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。