我正在努力添加 <Link/>
我的 material-ui AppBar 的组件
这是我的导航类:
class Navigation extends Component {
constructor(props) {
super(props)
}
render() {
var styles = {
appBar: {
flexWrap: 'wrap'
},
tabs: {
width: '100%'
}
}
return (
<AppBar showMenuIconButton={false} style={styles.appBar}>
<Tabs style={styles.tabs}>
<Tab label='Most popular ideas'/>
<Tab label='Latest ideas' />
<Tab label='My ideas' />
</Tabs>
</AppBar>
)
}
}
标签是可点击的,有流畅的动画,这很酷。但是我如何将它们与 react-router
连接在一起?及其'<Link/>
组件?
我试过添加 onChange
这样的听众:
<Tab
label='My ideas'
onChange={<Link to='/myPath'></Link>}
/>
但是我收到以下错误:
Uncaught Invariant Violation: Expected onChange listener to be a function, instead got type object
如果我尝试包装 <Tab/>
组件进入 <Link/>
组件,我收到错误 <Tabs/>
组件只接受 <Tab/>
组件。
这也不起作用(没有产生错误,但单击 Tab 不会将我带到路径):
<Tab label='Most popular ideas'>
<Link to='/popular'/>
</Tab>
我如何制作 <Link/>
组件与 <Tabs>
一起工作和 <AppBar>
?如果那不可能,我可以使用 material-ui
中的任何其他组件库以形成适当的菜单。
最佳答案
对于带有 Typescript 的 Material UI 1.0:请参阅 this post由下面的@ogglas 提供。
对于带有纯 JS 的 Material-UI 1.0:
<Tabs value={value} onChange={this.handleChange}>
{
this.props.tabs.map(
({label, path})=><Tab key={label}
label={label}
className={classes.tabLink}
component={Link}
to={path} />
)
}
</Tabs>
而classes.tabLink
定义为:
tabLink : {
display:"flex",
alignItems:"center",
justifyContent:"center"
}
这是如何运作的?
所有继承自 ButtonBase
的 mui 1.0 组件,支持 component
属性,参见 ButtonBase .这个想法是允许您控制组件呈现为它的包装器/根元素的内容。 Tab
也有这个特性,虽然在写这个答案的时候这个 prop 没有明确记录,但是 Tab
继承自 ButtonBase
,它的所有 props 都会继承(并且文档确实涵盖了这一点)。
ButtonBase
的另一个特点是,所有未被 ButtonBase
或继承的组件使用的额外属性都分布在指定的 组件
上.我们已使用此行为将 Link
使用的 to
Prop 发送给 Tab
控件。你可以用同样的方式发送任何额外的 Prop 。请注意,这对 ButtonBase
和 Tab
都有明确的记录。
感谢@josh-l 要求添加此内容。
关于javascript - Material-ui 从 react-router 添加 Link 组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37843495/