如何將道具傳遞給兒童React組件？

App.jsx> Welcome.js> WorkPlacePage.js

我如何通過道具WorkPlacePage.js使得WorkPlacePage.js，我可以這樣做：this.props.history.push()

我m試圖通過道具現在，但是當我console.log，歷史被輸出在控制檯爲未定義。感謝您的幫助！

App.jsx：

import Welcome from '../containers/welcome/Welcome'; 

const App = ({store}) => { 
    return (
    <StoreProvider store={store}> 
     <ConnectedRouter history={history}> 
     <Switch> 
      <PrivateRoute exact path="/welcome" layout={MainLayout} component={Welcome} /> 
      <WithMainLayout exact path="/" component={Home} /> 
      <AuthRoutes path={`/${clientResourceName}`} wrapper={WithMainLayout} /> 
      <WithMainLayout component={NotFound} /> 
     </Switch> 
     </ConnectedRouter> 
    </StoreProvider> 
); 
};

Welcome.js

import React from 'react'; 
import WorkPlacePage from '../../components/welcome/WorkPlacePage'; 

class Welcome extends React.Component { 

    constructor(props) { 
    super(props); 
    this.state = { 
     step: 1 
    }; 
    } 

    showStep() { 
    const {history} = this.props 

    console.log('showStep'); 
    console.log({history}) 

    switch (this.state.step) { 
     case 1: 
     return <WorkPlacePage history={history} /> 
     default: 
     return (
      <div> 
      <h1>Case: Default</h1> 
      </div> 
     ); 
    } 
    } 

    render() { 
    var style = { 
     width : (this.state.step/4 * 100) + '%' 
    } 
    return (
     <main> 
     <span className="progress-step">Step {this.state.step}</span> 
     <progress className="progress" style={style}></progress> 
     {this.showStep()} 
     </main> 
    ) 
    } 
} 

export default Welcome;

WorkPlacePage.js

import React from 'react'; 
import {connect} from 'react-redux'; 
import {bindActionCreators} from 'redux'; 

class WorkPlacePage extends React.Component { 

    render() { 

    console.log('this.props.history') 
    console.log(this.props.history) 

    return (
     <div> 
     <h1>Workplace</h1> 
     <span> 
     survey things 
     <button onClick={() => this.props.history.push("/confirmation")}>next page</button> 
     </span> 
     </div> 
    ); 
    } 
} 

export default WorkPlacePage;

** Updat ED - **

"react": "^15.5.4", 
"react-apollo": "^1.1.2", 
"react-devise": "^0.0.6", 
"react-devise-material-ui": "^0.0.1", 
"react-dom": "^15.5.4", 
"react-redux": "^5.0.4", 
"react-router-dom": "^4.1.1", 
"react-router-redux": "^5.0.0-alpha.6",

來源

2017-05-30 AnApprentice

您使用的是什麼版本的React Router？ – Li357

「react-router-dom」：「^ 4.1.1」，「react-router-redux」：「^ 5.0.0-alpha.6」，---這是你在找什麼？謝謝！ – AnApprentice

@AndrewLi這是否給你需要什麼？謝謝 – AnApprentice

有由反應路由器-Redux的出口推功能。

你可以寫一個行動的創建者中，你可以調用推送功能是這樣的：

import { push } from 'react-router-redux' 

function goTo(pathname) { 
    push({ pathname }) 
}

在按一下按鈕，就分派此GOTO行動。它將自行處理歷史。

請記住在創建商店時添加這些行。

import { routerMiddleware } from 'react-router-redux' 
import { browserHistory } from 'react-router' 

const middleware = applyMiddleware(
    ... 
    routerMiddleware(browserHistory), 
); 

const store = createStore(
    ... 
    applyMiddleware(middleware) 
)

希望它有幫助。

來源

2017-05-30 05:06:38

如何將道具傳遞給兒童React組件？

回答

相關問題