在我的情况下,如何提取从另一个传递来的道具用于'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));