Question

我尝试使用Array ( [0] => Array ( [0] => Volvo [1] => 20 ) [1] => Array ( [0] => BMW [1] => 10 ) [2] => Array ( [0] => Saab [1] => 10 ) [3] => Array ( [0] => Land Rover [1] => 10 ) )属性渲染新组件。这是我的组件代码

onTiTleClick

我传递了一个链接标记，但我认为它不起作用，因为我只返回了链接标记，而没有进行实际的重定向。如何定义一个能够将我重定向到import React, { Component } from 'react'; import { connect } from 'react-redux'; import { Link } from 'react-router-dom'; import AppBar from 'material-ui/AppBar'; import LoginButton from './LoginButton'; import LogoutButton from './LogoutButton'; class Header extends Component { constructor(props) { super(props); this.handleTitleClick = this.handleTitleClick.bind(this); } renderButton() { switch (this.props.auth) { case null: return case false: return <LoginButton /> default: return <LogoutButton /> } } handleTitleClick() { console.log(this) return( <Link to={this.props.auth ? '/courses' : '/'}></Link> ); } render() { const styles = { title: { cursor: 'pointer', }, }; return( <AppBar title={<span style={styles.title}>QueueMe</span>} onTitleClick={this.handleTitleClick} iconElementRight={this.renderButton()} showMenuIconButton={false} /> ); } } /* * @input: redux state * Allows the component to access certain piece of the state as props * Reducers determine the key in the state */ function mapStateToProps(state) { return { auth: state.auth }; } export default connect(mapStateToProps)(Header);或/courses并将其传递给/的{{1}}属性的函数？谢谢！

Answer 1

使用withRouter HOC - 您将获得history道具，您可以用它来以编程方式调整路线。

import { withRouter } from 'react-router'

class Component extends React.Component {
  render() {
    return (
      <button onClick={() => this.props.history.push('/courses')}>
        click me
      </button>
    )
  }
}

export default withRouter(Component)

我注意到你也在使用react-redux。在与一群拥有自己的HoC的图书馆合作时，真正困扰我的一件事就是弄清楚最终的出口。你最终会得到一堆污染代码的中间组件

const x = connect(...)(Component)
const y = someOtherHoC(...)(x)
export default withRouter(x)

我强烈推荐recompose - 您可以使用compose帮助器将它们链接在一起

export default compose(connect(...), someOtherHoC(...), withRouter)(Component)

如何使用Material-UI AppBar onTitleClick属性在React中渲染新组件？

1 个答案: