渡すpropTypesネイティブ反応する新しいコンポーネント

Question

で設定値、私はこのチュートリアルやっている：http://rationalappdev.com/movie-tickets-booking-app-with-react-native/をしかし、私はtは理解「をドンコードの行があります：const { movie, movie: { title, genre, poster }, onOpen } = this.props;

基本的には、映画のコンポーネント、MoviePosterコンポーネントを呼び出します

render() { 
    return (
    <View> 
     <ScrollView> 
     { movies.map((movie, index) => <MoviePoster 
      movie={movie} 
      onOpen={this.openMovie} 
      key={index} 
     />)} 
     </ScrollView> 
    </View> 
    ); 
} 

、ここではMoviePosterコンポーネントである：それに3つの値のpropTypes渡すことで

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;

1. これは定数に小道具をマッピングするようなものですか？ムービーコンポーネントが3つのデータ（オブジェクト、関数、キー）を渡し、異なるタイプのconstでどのように一致させることができるのでしょうか？
2. MoviePosterコンポーネントでthis.props.movi​​e.title、this.props.onOpen（）またはthis.props.keyなどを直接呼び出すことはできますか？もしそうなら、constの必要性は何ですか？

ご協力いただきありがとうござい

Answer 1

これは、ネストされたオブジェクトの非構造と呼ばれています。彼は単に渡された小道具から定数を作り、それを{this.props.movie.title}の代わりに{title}とタイプするだけです。

もっと長いバージョンを使用することは間違いありませんが、これはちょっと省略したものです。

詳細はチェックこのリンクを：https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

は、「ネストされたオブジェクトと配列非構造」セクションを確認してください。