鍍金池/ 問答/HTML5  HTML/ react-route不用redux怎么給組件傳參呢?

react-route不用redux怎么給組件傳參呢?

普通組件這樣傳參
class Home extends Component {

    constructor(props) {
        super(props)
    }

    doSomething() {
        
    }

    render() {
        return (
            <div>
                <Child onDoSomething={this.doSomething} />
            </div>
        );
    }
}

如果組件被弄到路由里面了,那Home組件怎么把doSomething傳遞給Child調(diào)用呢?(redux我知道,想知道不用redux,怎么傳遞)
class Home extends Component {

    constructor(props) {
        super(props)
    }

    doSomething() {

    }

    render() {
        return (
            <div>
                <Route path="/child" component={Child} />
            </div>
        );
    }
}

回答
編輯回答
離人歸

可以在Route上邊用render的方式加載子組件,這樣就可以傳遞你的這些函數(shù)之類的了。

<Route render={props => ( 
      <Component onDoSomething={this.doSomething}/>
  )}/>
2017年11月19日 03:39
編輯回答
下墜

好的,解決了

class Home extends Component {

    constructor(props) {
        super(props)
    }

    doSomething() {

    }

    render() {
        return (
            <div>
                <Auth path='/user' component={User} onDoSomething={this.doSomething} />
            </div>
        );
    }
}



class Auth extends Component {

    constructor(props) {
        super(props)

    }

    render() {

        let { component: Part, ...rest } = this.props

        
        return (
            <div>
                <Route {...rest} render={(props) => {
                    // 這里的rest就把onDoSomething穿都給User組件了<Part {...rest} {...props} />
                    return (
                        true ? <Part {...rest} {...props} /> : <Redirect to={{pathname: '/login', state: {from: props.location }}} />
                    )

                }} />
            </div>
        );
    }
}


2018年9月19日 08:29