如何在reactjs中访问父路由的道具

时间:2017-06-11 16:03:10

标签: reactjs react-router

React-route

上有路由
render(
<Provider store={store}>
    <Router history={browserHistory}>
        <Route path='/' component={App}>
            <IndexRoute  component={Home} />
            <Route path='/products' component={Products} />
            <Route path='*' component={NoMatch} />
        </Route>

    </Router>
</Provider>,
document.getElementById('root')
);

作为容器的智能应用程序组件

class App extends Component {
render() {

    return (
        <div className='page-content'>
            <Sidebar />

            <Content>
                {this.props.children}  // ---> Here output content from child routes
            </Content>

        </div>
    )
}
}

以下是产品组件,我试图从 App 容器中获取 props.products 。但是Products组件没有看到容器道具App。我认为这是因为 App 高出两级

export default class Products extends Component {

constructor(props) {
    super(props)
}

loadProducts() {
    this.props.getProducts()
}

render() {
    console.log(this.props.products); // undefined

    return (
        <div>
           <h3>Products</h3>

        </div>
    )
}
}

在容器应用中, props.products 我在chrome-dev-tools中检查过。但是,如何将其传递给产品组件?

0 个答案:

没有答案