Material-ui 从 react-router 添加 Link 组件 [英] Material-ui adding Link component from react-router

问题描述

我正在努力将 组件添加到我的 material-ui AppBar

I'm struggling to add <Link/> component to my 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 及其' 组件连接起来?

Tabs are clickable, have fluid animations, that's cool. But how do I wire them up together with react-router and its' <Link/> component?

我试过像这样添加 onChange 监听器:

I've tried adding onChange listener like that:

<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 的错误/> 组件只接受 组件.

If I try to wrap <Tab/> component into <Link/> component, I'm getting error that <Tabs/> component accepts only <Tab/> component.

这也不起作用(没有产生错误，但单击 Tab 不会将我带到路径):

This doesn't work either (no error is being produced, but clicking on Tab does not bring me to the path):

<Tab label='Most popular ideas'>
  <Link to='/popular'/>
</Tab>

如何让 组件与 和 一起工作?如果这是不可能的，我可以使用 material-ui 库中的任何其他组件来形成适当的菜单.

How do I make <Link/> component work together with <Tabs> and <AppBar>? If that's not possible, I can use any other component from material-ui library to form a proper menu.

推荐答案

对于带有 Typescript 的 Material UI 1.0:请参阅这篇文章 下面@ogglas.

For Material UI 1.0 with Typescript: see this post by @ogglas below.

对于带有纯 JS 的 Material-UI 1.0:

For Material-UI 1.0 with plain JS:

<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 也有这个功能，虽然在写这个答案的时候这个道具没有明确地记录，但是因为 Tab 继承自 ButtonBase，它的所有道具都保留下来(并且文档确实涵盖了这一点).

How this works?

All the mui 1.0 components inheriting from ButtonBase, support a component prop, see ButtonBase. The idea is to allow you to control what the component renders as its wrapper/root element. Tab also has this feature although at the time of writing this answer this prop is not documented explicitly, but as Tab inherits from ButtonBase, all its props carry over (and the documentation does cover this).

ButtonBase 的另一个特点是所有额外的 props，没有被 ButtonBase 或继承的组件使用，都分布在指定的 component 上.我们已使用此行为将 Link 使用的 to 道具发送给 Tab 控件.您可以以相同的方式发送任何其他道具.请注意，这对于 ButtonBase 和 Tab 都有明确记录.

Another feature of ButtonBase is that all the extra props, not in use by ButtonBase or inherited component, are spread over the specified component. We have used this behavior to send the to prop used by Link by giving it to Tab control. You can send any additional props in the same way. Note that this is documented explicitly for both ButtonBase and Tab.

感谢@josh-l 要求添加此内容.

Thanks @josh-l for asking this to be added.

这篇关于Material-ui 从 react-router 添加 Link 组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！