ルータ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が真実であるとき、私はそれがラップされることを望んでおらず、それに応じてそれを扱うことができます。 この目標を達成するにはどうすればよいですか？私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> 
) 
} 

を、おそらく私の戦略はオフです。

iは Passing additional parameters in React Routerのように、近くデュープスレッドのカップルを見ましたが、これにレンダリング子ルートを見て親ルートについて尋ねることイムを与え、私はこれで十分異なる です考え出し。ありがとう！

Answer 1

私はあなたがちょっとしたやり方でそれに近づいていると思います。反作用は一般的にトップダウンであり、逆の行動をとることはほとんどありません。一般的に、通信をしたいときは、コールバックなどを渡します。

あなたはそれをラップしたくないと言いましたが、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> 

このLETのあなたには、いくつかの厄介行うことなく、トップダウンの方法論を保つ親ルックス・アット・子供を-当時-子-異なるレンダリングのアプローチを。