私は以下のように反応するのコードを読んでいます。このjavascriptのソースコード

Question

を理解してください。特にこの行<Root navigation={addNavigationHelpers({ dispatch, state: nav })}/>。

上記コードは以下のコードと等しいですか？

class AppWithNavigation extends Component{ 

    render(){ 
    return (<Root navigation={this.props.addNavigationHelpers.bind(this)}/>); 
    } 

} 
const mapStateToProps = (state) => { 
    return { 
    nav: state.nav, 
    } 
} 

const mapDispatchToProps = (dispatch) => { 
    return { 
    addNavigationHelpers: (nav)=>{ 
     dispatch(addNavigationHelpers(nav)) 
    } 

    } 
} 

const AppWithNavigationState = connect(mapStateToProps, mapDispatchToProps)(AppWithNavigation); 

Answer 1

<Root navigation={addNavigationHelpers({ dispatch, state: nav })}/> 

これはJSXコードです。 1つの小道具ナビゲーションをとる、ルートと呼ばれるコンポーネントです。ナビゲーションの値は、addNavigationHelpersへの関数呼び出しの戻り値です。 addNavigationHelpers関数呼び出しには、{dispatch、state：nav}という引数があります。このオブジェクトは、次のように書くこともできます。

{ dispatch: dispatch, state: nav } 

これは読みやすいかもしれません。

また、以下のコードが上記のコードと等しいかどうかを尋ねます。そうではない。私は2つのルート要素を比較することに注力していきます：

<Root navigation={this.props.addNavigationHelpers.bind(this)}/> 

このコンポーネントは、コンポーネントの小道具としてaddNavigationHelpers機能を取ります。 addNavigationHelpers関数を呼び出して返される値は送信されませんが、関数自体が送信されます。

Answer 2

あなたが見ているものは、JavaScriptコードではなく、JSXに反応する可能性が高いです。 JSXの詳細については、React Documentationを参照してください。

この場合、Rootは、コールバックmapNavigationHelpersが受け渡される別のリアクションコンポーネントのようです（navigation）。

参照： - https://facebook.github.io/react/docs/introducing-jsx.html - https://facebook.github.io/react/docs/jsx-in-depth.html