Javascript 将道具传递给 React Router 子路由

Passing props to React Router children routes

提问by PhilVarg

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 childRouteAits propsA, and pass childRouteBits propsB. However, the only way i can figure out how to do this is to pass RouteHandlerboth propsAand propsBwhich 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.

我在解决反应路由器的问题时遇到了麻烦。场景是我需要从状态父组件和路由中传递子路由一组道具。
我想做的是通过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>
)

# 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/timei get the Child2component rendered. when i go to /filters/pricei get the Child1component rendered. the issue is that by doing this process, Child1and Child2are 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 RouteHandlertimeProps when i go to the time route (filters/time) and only pass priceProps to RouteHandlerwhen i go to the price route (filters/price) and avoid passing all props to all children routes?

这实际上以我期望的方式工作。当我链接到/filters/time我得到Child2组件呈现。当我去/filters/price我得到Child1组件呈现。问题是，做这个过程，Child1并且Child2都通过了allProps()，即使他们只需要价格和时间的道具，分别。如果这两个组件具有相同的 prop 名称，这可能会成为一个问题，并且一般来说，使用不需要的 props 来膨胀组件并不是一个好习惯（因为在我的实际情况下有超过 2 个子组件）。
所以总而言之，有没有办法RouteHandler在我去时间路线（filters/time）时传递timeProps并且只RouteHandler在我去价格路线（filters/price）时将priceProps传递给并避免将所有道具传递给所有子路线？

回答by Jim Skerritt

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

我遇到了类似的问题，发现你可以访问所设定的道具Route，通过this.props.route在路线的组成部分。知道了这一点，我像这样组织了我的组件：

index.js

索引.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

应用程序.js

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

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

HelloView.js

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!

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

---

---

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.

由于您的子 props 来自单个父组件，您的父组件，而不是 react-router，应该是管理哪个子组件被渲染的组件，以便您可以控制传递哪些 props。

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
  }
}

回答by Alex Shwarc

In child component, insted of

在子组件中，插入

return <div>{this.props.children}</div>

You may merge props with parent

您可以将 props 与 parent 合并

var childrenWithProps = React.cloneElement(this.props.children, this.props);
return <div>{childrenWithProps}</div>

回答by Paritosh Pundir

React.cloneElement can be used to render the child component and so as pass any data which is available inside the child route component which is defined in the route.

React.cloneElement 可用于渲染子组件，从而传递在路由中定义的子路由组件内可用的任何数据。

For eg, here I am passing the value of user to the react childRoute component.

例如，在这里我将 user 的值传递给 react childRoute 组件。

{React.cloneElement(this.props.childRoute, { user: this.props.user })}