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中检查过。但是,如何将其传递给产品组件?