陣營路由器V3 - 如何通過聲明和訪問其他元數據的子路由

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是truthy，我不希望它被包裹，並可以相應地處理它。 我該如何去實現這個目標？

• 我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

我認爲你可能會以一種無知的方式接近它。反應通常是自上而下的，沒有大量的行動以另一種方式進行。一般來說，當你想要通信時，你傳遞迴調或其他東西。

你提到你不希望它被包裝，但我認爲有一個包裝組件將是迄今爲止最乾淨的方法。

事情是這樣的：

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> 

這使你可以保持自上而下的方法，而不必做一些尷尬的父母看起來，在孩子 - 當時的呈現 - 兒童不同的方法。