如何将道具传递给儿童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组件？

回答

相关问题