如何将道具从一个组件转移到另一个组件

时间:2020-07-02 22:53:27

标签: react-native react-navigation

在我的情况下,如何提取从另一个传递来的道具用于'DishdetailComponent.js',下面的代码显示了我从(MenuComponent,js)进行传输的位置,并将其发送到'DishddetailComponent.js',我也传递了一个ishishId,所以我的问题是如何从DishdetailComponent中的该ishishId解包?我对此有点迷惑。.Ia m使用“ @ react-navigation / stack”:“ ^ 5.6.2”

MenuComponent.js

import React, { Component } from 'react' ;
import { FlatList } from 'react-native' ;
import { Tile } from 'react-native-elements' ;
import { withNavigation } from 'react-navigation';

//import { DISHES} from '../shared/dishes';


//1.import to connect to redux
import { connect } from 'react-redux';
import { baseUrl } from '../shared/baseUrl';

//2.leaders state from store
const mapStateToProps = state => {
    return {
         dishes: state.dishes
         
    } 
}

//functional component
class Menu extends Component {

     
       //display the Menu navigation at the top
      static navigationOptions =  {
            title: 'Menu',
      }
       
     
       
     //onPress uses the navigate to pass the dishId to Dishsetail
     //to display the dish detail of the selected dish
     render() { 
        
        const  { navigate }  = this.props.navigation ;

        const renderMenuItem = ({item, index}) => {
            return (
                <Tile   
                    key={index}
                    title={item.name}
                    caption={item.description}
                    featured
                    onPress={() => navigate('Dishdetail', { dishId: item.id })} //<= props to Dishdetail
                    imageSrc={{ uri: baseUrl + item.image }}
                  />
            );
        } 

       //extract the navigation comp passed to be used to pass
       //dishId to Dishdetail
       //const  { navigate }  = this.props.navigation ;
      
       return (
            <FlatList 
                data= {this.props.dishes.dishes}
                renderItem={renderMenuItem}
                keyExtractor={Item => Item.id.toString() }
                />
            )
     }   
}

export default connect(mapStateToProps)(withNavigation(Menu));

0 个答案:

没有答案