Question

我的路线看起来像这样：

<Router history={syncHistoryWithStore(browserHistory, store)}>
  <Route path='/' component={Widget}>
    <Route path='/a' component={A} />
    <Route path='/b' component={B} expand />
    <Route path='/c' component={C} />
  </Route>
  <Route path='*' component={FourOhFour} />
</Router>

因此，Widget将A，B或C呈现为子项。请注意，在B我添加了拥有道具，expand。通常，Widget将子项包装在其他一些填充的DOM节点中。当expand真实时，我不希望它被包裹，并且可以相应地处理它。 我如何实现这一目标？

在我的Widget组件中，props.routes是一个东西，但它包含树中每条路线的数组。
在我的Widget组件中，props.route是一个东西，但它没有给我一个匹配的子路由的引用。
- 就像我想要一个props.route.child，以便嗅探expand

我设想了这样的事情：

render () {
  const { children, route: { child: { expand } } } = this.props
  return (
    <div {...someOtherProps}>
      {expand ? children : <p id="padded-thing">{children}</p>}
    </div>
  )
}

我确信这是一个已解决的问题，尽管我的策略可能已经解决了。

我确实看到了几个近乎重复的线程，比如Passing additional parameters in React Router，但是考虑到我询问父路线看到了渲染子路线，我认为这是足够不同。谢谢！

Answer 1

我认为你可能会以一种不稳定的方式接近它。 React通常是自上而下的，没有相反的行动。通常，当您想要进行备份通信时，您会传递回调或其他内容。

你提到你不希望它被包装，但我认为拥有一个Wrapper组件将是迄今为止最干净的方法。

这样的事情：

import { A, B, C } from './children';
import { Wrapper } from './wrapper';

const WrappedB = <Wrapper><B /></Wrapper>;

// ...
<Router history={syncHistoryWithStore(browserHistory, store)}>
  <Route path='/' component={Widget}>
    <Route path='/a' component={A} />
    <Route path='/b' component={WrappedB} />
    <Route path='/c' component={C} />
  </Route>
  <Route path='*' component={FourOhFour} />
</Router>

这让你保持自上而下的方法，而不必做一些尴尬的父母看起来孩子然后呈现孩子不同的方法。

React Router v3 - 如何以声明方式传递＆amp;访问子路由的其他元数据

1 个答案: