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

问题描述

我很难将< Link /> 组件添加到我的材料-ui AppBar

这是我的导航类：

  class Navigation extends Component {
 constructor（props）{
 super（道具）
} 
 
 render（）{
 var styles = {
 appBar：{
 flexWrap：'wrap'
}，
标签：{
宽度：'100％'
} 
} 
 
返回（
< AppBar showMenuIconButton = {false} style = {styles.appBar}> 
< Tabs style = {styles.tabs}> 
< Tab label ='最受欢迎的创意'/> 
< Tab label ='最新点子'/> 
< Tab label ='我的想法'/> 
< / Tabs> 
< / AppBar> 
）
} 
} 
  

看起来没问题：

标签是可点击的，有流畅的动画，很酷。但是如何与 react-router 及其'< Link /> 组件一起连接它们？

我尝试添加 onChange 这样的监听器：

 < Tab 
 label ='我的想法'
 onChange = {< Link to ='/ myPath'>< / Link>} 
 /> 
  

但是我收到以下错误：

 未捕获的不变违规：预期onChange监听器是一个函数，而是获得类型对象
  

如果我尝试将< Tab /> 组件包装到< Link /> 组件，我收到错误< Tabs /> 组件只接受< Tab /> 组件。

这也不起作用（没有产生错误，但点击Tab不会让我走上路径）：

 < Tab label ='最受欢迎的创意'> 
< Link to ='/ popular'/> 
< / Tab> 
  

如何制作< Link /> 组件与< Tabs> 和< AppBar> 一起使用？如果那是不可能的，我可以使用 material-ui 库中的任何其他组件来形成一个合适的菜单。

解决方案

对于带有Typescript的Material UI 1.0：请参阅下面的@ogglas 这篇文章。 / p>

对于带有普通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组件，支持组件 prop，请参阅 ButtonBase 。我们的想法是允许您控制组件呈现为其包装器/根元素的内容。 Tab 也有此功能，但在撰写本答案时，此道具未记录显式，但是 Tab 继承自 ButtonBase ，其所有道具都被遗留（文档确实涵盖了这一点）。

ButtonBase 的另一个特性是， ButtonBase 或继承组件未使用的所有额外道具都会被传播超过指定的组件。我们已经使用此行为将发送到链接使用的，将其提供给标签控制。您可以以相同的方式发送任何其他道具。请注意， ButtonBase 和 Tab 都明确记录了这一点。

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

I'm struggling to add <Link/> component to my material-ui AppBar

This is my navigation class:

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>
    )
  }
}

Which looks okay:

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

I've tried adding onChange listener like that:

<Tab
  label='My ideas'
  onChange={<Link to='/myPath'></Link>}
/>

However I'm getting following error:

Uncaught Invariant Violation: Expected onChange listener to be a function, instead got type object

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

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>

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.

解决方案

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

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>

And classes.tabLink is defined as:

tabLink : {
    display:"flex",
    alignItems:"center",
    justifyContent:"center"
}

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).

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.

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

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