尝试理解这个 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

您正在查看的很可能不是 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 的组件，它采用一个 prop 导航。导航的值是对 addNavigationHelpers 的函数调用的返回值。 addNavigationHelpers 函数调用有一个对象作为参数：{ dispatch, state: nav }。这个对象也可以这样写：

{ dispatch: dispatch, state: nav }

这可能更具可读性。

你还问下面的代码是否等于上面的代码。它不是。我将重点比较两个 Root 组件：

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

此组件将 addNavigationHelpers 函数作为组件的属性。它不会调用 addNavigationHelpers 函数并发送返回值，但会发送函数本身。

尝试理解这个 javascript 源代码

Try to understand this javascript source code

javascript

reactjs

react-redux