試着去了解這個JavaScript源代碼

Question

我正在讀起以下作用的代碼：

const AppWithNavigationState = connect(state => ({ 
    nav: state.nav, 
}))(({dispatch, nav}) => (
    <Root navigation={addNavigationHelpers({ dispatch, state: nav })}/> 
)); 

我不太明白上面的代碼。特別是這條線<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代碼。它是一個稱爲Root的組件，它接受一個道具導航。導航的值是對addNavigationHelpers的函數調用的返回值。 addNavigationHelpers函數調用具有一個對象作爲參數：{dispatch，state：nav}。這個對象也可以這樣寫：

{ dispatch: dispatch, state: nav } 

這可能更具可讀性。

您還會問下面的代碼是否等於上面的代碼。不是這樣。我將重點比較兩個Root組件：

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

此組件將addNavigationHelpers函數作爲組件的prop。它不會調用addNavigationHelpers函數併發送返回值，但會自動發送函數。

Answer 2

你在看什麼最有可能不是JavaScript代碼，而是反應JSX。您可以在React文檔中找到有關JSX的更多信息。

在這種情況下，Root似乎是另一個React組件，回調mapNavigationHelpers被傳遞/綁定爲navigation。

請參見： - https://facebook.github.io/react/docs/introducing-jsx.html - https://facebook.github.io/react/docs/jsx-in-depth.html