将 props 传递给 React Router 子路由

Posted 2023-02-19

【中文标题】将 props 传递给 React Router 子路由

【英文标题】：Passing props to React Router children routes

【发布时间】：2015-10-30 00:28:07

【问题描述】：

我无法解决 React 路由器的问题。场景是我需要从状态父组件和路由传递子路由一组道具。 我想做的是通过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()

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

【参考方案1】：

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

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

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

【参考方案2】：

在子组件中，插入

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

您可以将 props 与父级合并

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

【参考方案3】：

我遇到了类似的问题，发现您可以在路由组件中通过this.props.route 访问设置在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

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

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

---

好的，现在我对您的问题有了更好的理解，您可以尝试以下方法。

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

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

路线

<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
  

【讨论】：

你在 index.js 中有一些硬编码的水果，因为我的道具来自其父级的状态。所以我不能从 index.js 向路由传递任何东西

我已经更新了我的答案，因为我更好地理解了你的问题。希望有帮助

我真的很讨厌如何使用 react 路由器，但这个答案几乎让我走上了正确的道路。我使用了this.context.router.getCurrentParams（因为我没有使用 beta 1.0），然后制作了一个对象映射来将我需要的道具传递给路由处理程序。从那里我使用 switch 语句来获取正确的孩子。

子组件中需要的 props 是父组件状态的一部分，而不是像上面的 fruits 数组这样的新数据？由于在<Router> 中，父App 的状态不在范围内，因此无法将其传递给子<Route> 中的组件，或者父组件中对子组件的所有引用都是this.props.children 而不是` 再次无法通过表达式this.props.children 的语法传递它。有什么收获？