javascript - React Native redux 导出默认连接

Question

当我将react-navigation与redux结合使用时，我不想分离组件。 如何制作“const=”而不是制作新文件并“导出默认值”

const IntroScreen2 =connect(mapStateToProps,mapDispatchToProps)(IntroScreen2a)
const IntroScreen2 =()=> connect(mapStateToProps,mapDispatchToProps)(IntroScreen2a)

导出默认连接... 哪一个是正确的？

https://codeshare.io/G79NRk

Answer 1

这样做，在使用默认连接导出的同一文件中定义组件，并传入文件中定义的组件。

这些陈述应该有助于消除您的误解。

通过 react 导航，您拥有屏幕(组件)，并且拥有导航器。导航器是使用屏幕(组件)创建的。

您使用react-redux的connect函数将组件连接到redux存储。您只需将组件包装在连接调用中，然后导出该组件的返回值，而不是组件本身。

创建导航器时，您需要导入屏幕的组件。

看下面三页，我们制作一个组件，通过react-redux的connect函数导出连接到redux store的组件。

然后我们创建一个路由器，它从React导航中导出单个堆栈导航器，它定义了一个屏幕，即定义的组件(上面提到的)。

然后我给出了一个示例，说明如何在 App.js 中渲染该路由器。

some-component.js

import React, {Component} from "react";
import {connect} from "react-redux"

// Define the component
class SomeComponent extends Component {
    render() {
        return null;
    }
}

// Map dispatch to props
const mapDispatchToProps = (dispatch) => {
   return {};
}

// Map state to props
const mapStateToProps = (state) => {
    return {};
};

// Export the component, passed into the connect function from react-redux.
export default connect (mapStateToProps, {}) (SomeComponent);

然后在使用 react 导航定义导航器时导入此文件即可。

例如

router.js

import SomeComponent from "./some-component.js";
import {createStackNavigator} from "react-navigation";

export default createStackNavigator({
     PageOne: {
          screen: SomeComponent
     }
});

在您的 App.js(根级别)

import React, {Component} from "react";
import Router from "./router.js";

export default class App extends Component {

    render () {

        return <Router/>;
    }
}

类似的事情应该可以让你排序!