传递道具到React Router子路由 [英] Passing props to React Router children routes

问题描述

我无法克服反应路由器的问题。场景是，我需要传递一组道具从一个状态父组件和路由的道路。

我想要做的是pass childRouteA 其 propsA ，并传递 childRouteB 其 propsB 。但是，我可以弄清楚如何做到这一点的唯一方法是通过 RouteHandler propsA 和 propsB 这意味着每个子路由获取每个子进程，而不管它是否相关。这不是一个阻塞问题，但我可以看到一个时间，当我将使用两个相同的组件，这意味着propA上的键将被propB的键覆盖。

 ＃routes 
 routes =（
< Route name ='filter'handler = {Parent} > 
< Route name ='price'handler = {Child1} /> 
< Route name ='time'handler = {Child2} /> 
< / Route> ; 
）
 
＃父组件
 render： - > 
< div> 
< RouteHandler {... @ allProps（）} /> 
< / div> 
 
 timeProps： - > 
 foo：'bar'
 
 priceProps： - > 
 baz：'qux'
 
＃assign = require'object-assign'
 allProps：> 
 assign {}，timeProps（），priceProps（）
  

期望它。当我链接到 / filters / time 时，我得到 Child2 组件。当我去 / filters / price 我得到 Child1 组件呈现。问题是通过这个过程， Child1 和 Child2 都通过 allProps ，即使他们只需要价格和时间道具，分别。这可能会成为一个问题，如果这两个组件具有相同的道名，并且一般不是一个很好的做法膨胀组件与不需要的道具（因为在我的实际情况下有超过2个孩子）。

所以在总结，是有办法通过 RouteHandler timeProps当我去时间路线（过滤器/时间），并且只有当我去价格路线（ filters / price RouteHandler >）并避免将所有道具传递给所有子路由？

解决方案

我遇到了类似的问题，在路径组件中的 Route 上通过 this.props.route 设置。知道这一点，我组织了我的组件像这样：

index.js

  React.render（（
< Router history = {new HashHistory（）}> 
< Route component = {App}> 
< Route 
 path =/ hello
 name =hello
 component = {views.HelloView} 
 fruits = {['orange'，'banana'，'grape']} 
 /> 
< / Route> 
< / Router> 
），document.getElementById（'app'））; 
  

App.js

  class App extends React.Component {
 constructor（props）{
 super（props）; 
} 
 
 render（）{
 return< div> {this.props.children}< / div> ;; 
} 
} 
  

HelloView.js

 类HelloView extends React.Component {
 constructor（props）{
 super（props）; 
} 
 
 render（）{
 return< div> 
< ul> 
 {this.props.route.fruits.map（fruit => 
< li key = {fruit}> {fruit}< / li> 
）} 
< / ul> 
< / div> ;; 
} 
} 
  

这是使用react-router v1.0-beta3 。希望这有帮助！

---

好吧，现在我更好地理解你的问题，这里是你可以尝试。 p>

由于你的孩子道具是来自单个父亲，你的父组件，而不是react-router，应该是管理哪个孩子被渲染，以便你可以控制哪些道具

您可以尝试更改路由以使用参数，然后检查父组件中的参数以呈现适当的子组件。

路线

 < Route name =filterpath =filter /：namehandler = {Parent} /> 
  

父组件

  render：function（）{
 if（this.props.params.name ==='price'）{
 return< Child1 {... this.getPriceProps（）} /> 
} else if（this.props.params.name ==='time'）{
 return< Child2 {... this.getTimeProps（）} /> 
} else {
 // something else 
} 
} 
  

I'm having trouble overcoming an issue with react router. The scenario is that i need to pass children routes a set of props from a state parent component and route.
what i would like to do is pass childRouteA its propsA, and pass childRouteB its propsB. However, the only way i can figure out how to do this is to pass RouteHandler both propsA and propsB which means every child route gets every child prop regardless of whether its relevant. this isnt a blocking issue at the moment, but i can see a time when i'd be using the two of the same component which means that keys on propA will overwritten by the keys by the keys of propB.

# routes
routes = (
  <Route name='filter' handler={ Parent } >
    <Route name='price' handler={ Child1 } />
    <Route name='time' handler={ Child2 } />
  </Route>
)

# Parent component
render: ->
  <div>
    <RouteHandler {...@allProps()} />
  </div>

timeProps: ->
  foo: 'bar'

priceProps: ->
  baz: 'qux'

# assign = require 'object-assign'
allProps: ->
  assign {}, timeProps(), priceProps()

This actually works the way i expect it to. When i link to /filters/time i get the Child2 component rendered. when i go to /filters/price i get the Child1 component rendered. the issue is that by doing this process, Child1 and Child2 are both passed allProps() even though they only need price and time props, respectively. This can become an issue if those two components have an identical prop name and in general is just not a good practice to bloat components with unneeded props (as there are more than 2 children in my actual case).
so in summary, is there a way to pass the RouteHandler timeProps when i go to the time route (filters/time) and only pass priceProps to RouteHandler when i go to the price route (filters/price) and avoid passing all props to all children routes?

解决方案

I ran into a similar issue and discovered that you can access props set on the Route through this.props.route in your route component. Knowing this, I organized my components like this:

index.js

React.render((
  <Router history={new HashHistory()}>
    <Route component={App}>
        <Route
          path="/hello"
          name="hello"
          component={views.HelloView}
          fruits={['orange', 'banana', 'grape']}
        />
    </Route>
  </Router>
), document.getElementById('app'));

App.js

class App extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return <div>{this.props.children}</div>;
  }
}

HelloView.js

class HelloView extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return <div>
      <ul>
        {this.props.route.fruits.map(fruit => 
          <li key={fruit}>{fruit}</li>
        )}
      </ul>
    </div>;
  }
}

This is using react-router v1.0-beta3. Hope this helps!

---

Ok, now that I'm understanding your issue better, here's what you could try.

Since your child props are coming from a single parent, your parent component, not react-router, should be the one managing which child gets rendered so that you can control which props are passed.

You could try changing your route to use a param, then inspect that param in your parent component to render the appropriate child component.

Route

<Route name="filter" path="filter/:name" handler={Parent} />

Parent Component

render: function () {
  if (this.props.params.name === 'price') {
    return <Child1 {...this.getPriceProps()} />
  } else if (this.props.params.name === 'time') {
    return <Child2 {...this.getTimeProps()} />
  } else {
    // something else
  }
}

这篇关于传递道具到React Router子路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！