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

你所看到的很可能不是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

Answer 2

<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函数并发送返回的值，但它会自动发送函数。

尝试了解这个javascript源代码

2 个答案: