首页 文章

传递状态映射到redux w / React Router中的props

提问于
浏览
2

我正在尝试将状态映射到根组件中的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 回答

相关问题