新的反应原生,我正在做这个教程:http://rationalappdev.com/movie-tickets-booking-app-with-react-native/但是有一行我不明白的代码:const { movie, movie: { title, genre, poster }, onOpen } = this.props;
基本上,Movie组件通过向其传递3个值propTypes来调用MoviePoster组件:
render() {
return (
<View>
<ScrollView>
{ movies.map((movie, index) => <MoviePoster
movie={movie}
onOpen={this.openMovie}
key={index}
/>)}
</ScrollView>
</View>
);
}
这是MoviePoster组件:
export default class MoviePoster extends Component {
// Component prop types
static propTypes = {
// Movie object with title, genre, and poster
movie: PropTypes.object.isRequired,
// Called when user taps on a poster
onOpen: PropTypes.func.isRequired,
}
render() {
const { movie, movie: { title, genre, poster }, onOpen } = this.props;
return (
<TouchableOpacity style={styles.container} onPress={() => onOpen(movie)}>
<View style={styles.imageContainer}>
<Image source={{ uri: poster }} style={styles.image} />
</View>
<Text style={styles.title} numberOfLines={1}>{title}</Text>
<Text style={styles.genre} numberOfLines={1}>{genre}</Text>
</TouchableOpacity>
);
}
}
我不明白这一行:const { movie, movie: { title, genre, poster }, onOpen } = this.props;
感谢您的帮助
答案 0 :(得分:1)
这称为嵌套对象解构。他只是从传递的道具中创建常量并映射它们,键入{title}
而不是{this.props.movie.title}
。
你绝对可以使用更长的版本,这只是一个简写。
点击此链接了解详情:https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
检查“嵌套对象和数组解构”部分。