我正在尝试将状态映射到根组件中的props,并将props传递给所有子组件 . 这是我到目前为止所拥有的 .
index.js
render(
<Provider store={store}>
<Router children={routes} history={history} />
</Provider>,
document.getElementById('app')
)
.
root.js
class Root extends Component {
constructor(props) {
super(props)
}
render() {
const { user, fetchLogin } = this.props
return (
<div id="root root-dev">
<h1>tsuyoku app</h1>
<LoginStatus user={user} fetchLogin={fetchLogin} />
<hr />
<DevTools />
<div {...this.props} />
</div>
)
}
}
function mapStateToProps(state) {
return {
user: state.user
}
}
export default connect(
mapStateToProps,
userActions
)(Root)
.
home.js
import React, { Component } from 'react'
import { Link } from 'react-router'
export default class Home extends Component {
constructor(props) {
super(props)
}
render() {
console.log(this.props) // only has router props
let { user } = this.props // undefined
return (
<div id="home-page">
<h2>Home Page</h2>
</div>
)
}
}
我的root.js正确地将状态映射到道具,当我将特定道具传递给 <LoginStats />
时,它可以工作 . 但是,当我尝试通过 <div {...this.props} />
传递所有道具时,道具在 <Home />
中不可用 . 组件呈现,只是没有所有的道具 .
编辑:您必须使用react-router 1.0而不是将 {...this.props}
传递给div
{React.cloneElement(this.props.children, { ...this.props })}
1 回答
在路由器返回的顶级组件中使用
Provider
. 或者,在react-router 2.0中使用新的render
prop https://github.com/rackt/react-router/blob/latest/upgrade-guides/v2.0.0.md#routingcontext---router-render-prop