Question

我在react-native应用程序中使用i18N组件，我还要将redux实现到我的应用程序中。我需要从我的entryPage.js文件中导出connect(mapStateToProps)和translate()。我试图单独导出它们，比如

module.exports = connect(mapStateToProps)(entryPage);
module.exports = translate()(entryPage);

但是，在这种情况下，我估计下面的一个不会导出。

另一方面，如果我尝试将它们一起导出，如

module.exports = connect(mapStateToProps)translate()(entryPage);

我遇到了错误。

我试图用compose-function来解决。但我得到一个空屏幕和警告信息。

这是我的entryPage.js文件。

import React,{Component} from 'react';
import { translate } from 'react-i18next';import {connect} from 'react-redux';
import { StyleSheet, Text, View, Button,TextInput} from 'react-native';
import {Actions} from 'react-native-router-flux';
import compose from 'compose-function';
import {changeLang} from '../actions';

 class entryPage extends Component {


    changeLang(lang){
        console.log(lang);
        this.props.dispatch(changeLang(lang));
    }

    render() {

        console.log("This Props.t: ",this.props.t);
        const { t, i18n } = this.props;

        return (
            <View style={styles.container}>
                <TextInput style={{marginBottom: 100, width: 55, height: 50,borderWidth: 1, borderBottomColor: 'black'}} value={this.props.currentLang} editale={false}/>
                <Text>Languages</Text>
                    <Button onPress={() => { i18n.changeLanguage('en'),this.changeLang("English") }} title="English"/>
                    <Button onPress={() => { i18n.changeLanguage('fr'),this.changeLang("French") }} title="French"/>
                    <Button onPress={() => { i18n.changeLanguage('de'),this.changeLang("German") }} title="German"/>
                    <Button onPress={()=>Actions.second()} title={t('entryPage:goToPage2')}/>
                <Text>{t('entryPage:simpleText')}</Text>
            </View>
        );
    }
}

mapStateToProps = (state) =>  {
    return {
        currentLang: state.curretLang
    }
}



const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
    separate: {
        marginTop: 50
    }
});

export default compose(translate, connect(mapStateToProps))(entryPage);

这是warning我面临的问题。

你能帮帮我吗？我该如何解决这个问题。我需要将它们都导出。

Answer 1

这是compose - 函数派上用场的地方，而不是像以下那样：

export default translate(connect(mapStateToProps))(entryPage)

您可以这样做：

export default compose(translate, connect(mapStateToProps))(entryPage)

Here是在NPM上发布的compose函数，还有compose - 函数捆绑在许多流行的库中，如Ramda，Recompose或Redux。

从同一个react-native文件中导出translate（）和connect（mapStateToProps）

1 个答案: