如何将mapStateToProps链接到同一React Native组件中的两个类

时间:2019-01-08 09:39:53

标签: react-native react-redux

我的本​​机组件中有两个类,第一个不带导出,所以只是一个类,第二个带导出默认值。然后让mapStateToProps链接到第二个类,并且工作正常,但是现在我也想链接第一类,因为this.props.dipatch无法正常工作。你有什么解决办法吗?这是我的代码:

         import React, { Component } from 'react';
        import {
         TouchableOpacity ,
         View,
        BackHandler,
        Image,
        Text,
        Button,

        Platform,

           } from 'react-native'; 

         import {connect } from 'react-redux'

            class HeaderBarWebView extends Component{
             constructor(props){

       super(props);
         }

        goCamera(){

        this.props.dispatch(changeCurrentPage("camera"))
          }

    render(){
   return(

    <View>

   <TouchableOpacity style={{justifyContent:'center',display:  'flex'}} 
     onPress={this.goCamera}>
    <Image
    style={{tintColor:"white" , height:30,
  width:30,marginRight:20}}
   source={require('../resource/img/camera.png')}
      />
   </TouchableOpacity>   

     </View>
         )}}

     class WebviewApp extends Component{

     constructor(props)
     {

   this.state={}
   this.goCamera= this.goCamera.bind(this)
     goCamera(){

    this.props.dispatch(changeCurrentPage("camera"))
               }
    render()
     {
      return(
      <View style={{flex:1,width:"100%"}}>
            <Button title="Press me" onPress={this.goCamera}></Button>

       <CustomWebView
       ...........................
      />

      </View>
       );
     }
        }

   const mapStateToProps = state => ({
  page:state.router.page,


                })
 const WebviewAp = connect(mapStateToProps)(WebviewApp)
     export default WebviewAp

1 个答案:

答案 0 :(得分:0)

您也可以像连接第二类一样连接第一类

connect(mapStateToProps)(HeaderBarWebView);

const WebviewAp = connect(mapStateToProps)(WebviewApp);
export default WebviewAp;

但是,您应该为所有单独的组件创建新文件并与导入和导出逻辑一起使用的更简单的方法。