在Component中传递propTypes值设置

时间:2017-06-25 08:32:57

标签: reactjs react-native

新的反应原生,我正在做这个教程: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;

  1. 它就像是一种将道具映射到常数?怎么可能因为Movie组件传递3个数据(一个对象,一个函数和一个键)而在const中我们有不同的类型,它怎么能匹配?
  2. 我们可以直接在MoviePoster组件中调用:this.props.movi​​e.title,this.props.onOpen()或this.props.key吗?如果是这样,const需要什么?
  3. 感谢您的帮助

1 个答案:

答案 0 :(得分:1)

这称为嵌套对象解构。他只是从传递的道具中创建常量并映射它们,键入{title}而不是{this.props.movie.title}

你绝对可以使用更长的版本,这只是一个简写。

点击此链接了解详情:https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

检查“嵌套对象和数组解构”部分。