传递道具以反应路线

Question

我在克服react路由器的问题时遇到困难。该场景是，我需要从状态父组件和路由向子路由传递一组道具
我想做的是传递childRouteAitspropsA，传递childRouteBitspropsB。然而，我能找到的唯一方法是通过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()

这实际上是我所期望的方式。当我链接到/过滤器/时间我得到Child2组件渲染。当我去/过滤器/价格我得到Child1组件渲染。问题是通过做这个过程，Child1和Child2都被传递了allProps（），尽管它们分别只需要价格和时间道具。这可能成为一个问题，如果这两个组件有一个相同的道具名称，并且一般来说，用不需要的道具来膨胀组件不是一个好的做法（因为在我的实际情况下有超过2个孩子）。
所以总结一下，有没有一种方法通过RouteHandlertimeProps时，我去的时间路线（过滤器/时间）和只有通过priceProps到RouteHandler时，我去的价格路线（过滤器/价格）和避免通过所有的道具所有儿童路线？

Answer 1

反应cloneElement可用于呈现子组件，以便传递路由中定义的子路由组件内部可用的任何数据。

例如，在这里，我将用户的值传递给反应儿童路线组件。

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

Answer 2

在子组件中，insted of

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

您可以将道具与父道具合并

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

Answer 3

我遇到了一个类似的问题，发现您可以通过访问路线上设置的道具。道具。在路线组件中的路线。知道了这一点，我组织我的组件如下：

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'));

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

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

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

这是使用反应路由器v1.0-beta3。希望这能有所帮助！

好吧，现在我更好地理解了你的问题，下面是你可以尝试的。

由于您的子道具来自单个父级，因此您的父级组件（而不是react router）应该是管理渲染哪个子级的组件，以便您可以控制传递哪些道具。

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

<Route name="filter" path="filter/:name" handler={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
  }
}