Question

我正在尝试将状态映射到根组件中的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 />中没有道具。组件渲染，只是没有所有的道具。

编辑：而不是将{...this.props}传递给div，而不是反应路由器1.0+，你必须使用

{React.cloneElement(this.props.children, { ...this.props })}

Answer 1

在路由器返回的顶级组件中使用Provider。或者，在react-router 2.0 https://github.com/rackt/react-router/blob/latest/upgrade-guides/v2.0.0.md#routingcontext---router-render-prop

中使用新的render道具

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

1 个答案: