将props传递给 React Router 子路由

IT技术 javascript coffeescript reactjs parent-child react-router
2021-04-05 18:57:41

我在解决react-router的问题时遇到了麻烦。场景是我需要从状态父组件和路由中传递一组props的子路由。
我想做的是通过childRouteA它propsA，然后通过childRouteB它propsB。但是，我能弄清楚如何做到这一点的唯一方法是通过RouteHandler这两个路径propsA，propsB这意味着每个子路径都会获取每个子props，而不管其是否相关。目前这不是阻塞问题，但我可以看到我会使用两个相同组件的时间，这意味着 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()，即使他们只需要价格和时间的props，分别。如果这两个组件具有相同的 prop 名称，这可能会成为一个问题，并且通常这不是使用不需要的 props 膨胀组件的好习惯（因为在我的实际情况下有超过 2 个子组件）。
所以总而言之，有没有办法RouteHandler在我去时间路线（filters/time）时传递timeProps并且只RouteHandler在我去价格路线（filters/price）时传递priceProps并避免将所有props传递给所有子路线？

3个回答

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

索引.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'));

应用程序.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
  }
}
我已经更新了我的答案，因为我更好地理解了你的问题。希望能帮助到你
2021-06-12 18:57:41
子组件中需要的 props 是父组件状态的一部分，而不仅仅是像fruits上面的数组这样的一些新数据？由于<Router>父App组件的状态不在作用域内，因此无法将其传递给<Route>子组件中的组件，或者父组件中对子组件的所有引用都是{this.props.children}而不是 <aComponent data={this.state.soemPoriton} />` 一再次无法通过 expression 的语法传递它{this.props.children}。有什么收获；？
2021-06-13 18:57:41
我真的很讨厌反应路由器需要如何使用，但这个答案几乎让我走上了正确的道路。我使用了this.context.router.getCurrentParams（因为我没有使用 beta 1.0）然后制作了一个对象映射来将我需要的道具传递给路由处理程序。从那里我使用 switch 语句来获得正确的孩子。
2021-06-20 18:57:41
你在 index.js 中有一些硬编码的结果，因为我的道具来自它的父状态。所以我不能从 index.js 向路由传递任何东西
2021-06-21 18:57:41

在子组件中，插入 

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

您可以将 props 与 parent 合并

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

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

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

{React.cloneElement(this.props.childRoute, { user: this.props.user })}
其它你可能感兴趣的问题
上一篇在 React 中使用 document.querySelector？我应该使用 refs 吗？如何？ 下一篇在 React 中使用不可变状态有什么缺点？