如何理解React中的props?



  • 问题

    在看代码时,总是会看到this.props.name或者this.props.navigator这类属性。但是去代码中找呢又找不到这个属性在哪儿定义的。所以对于这个时不时跳出来的props,一直不能很好的理解。有没有朋友能讲下或者有什么资料可以让我更好的理解props,提前感谢。

    我现在对props的理解:

    这里把我所知道的props写下来,大家看有些什么问题或者能补充的。

    • props与state相对,在当前组件中state是可变的而props是不可变的。
    • props在getDefaultProps方法中初始化定义。
    • 可以将父级组件中的props传递给子组件中(这个不知道对不对)。
    • props是组件的属性。

    对props的疑惑

    • 经常在某个组件中看到一些没有定义的props,他们是从何而来。
    • 是不是不用定义,用了就算是定义呢。比如我没有在getDefaultProps中定义name,而我在之后用了this.props.name这是不是自动定义了呢?
    • 又或者这些莫名其妙蹦出来的props是某些组件或者父级组件传进来的呢?
    • props是不可变的,但在有些地方的文档好像说可以在父级还是子级组件去修改props。
    • 那些RN组件的属性是不是也是放在props中用的呢?

    总之,总结一句话就是这些莫名其妙蹦跶出来的props是哪儿来的?他们可以修改吗?



  • 那些RN组件的属性是不是也是放在props中用的呢?

    是的,当我们在使用RN的Text控件时,定义的autoFocus之类的就是props

    可以将父级组件中的props传递给子组件中(这个不知道对不对)

    对,但是不止父级组件中的propsstate也可以。对于自定义控件,你可以传任何自定义的props。这是一种数据流,单向的

    props是不可变的,但在有些地方的文档好像说可以在父级还是子级组件去修改props。

    props的确是不可变的,但是如果你把父级组件的state作为props传给子级,那么父级的state变化时,子级的props就会变化,可以在componentWillReceiveProps中捕获


  • administrators

    0_1462761761688_props.png



  • @chezhe
    @sunnylqm
    非常感谢你能回答我的问题,我这里还有几个疑惑希望可以帮我回答下~

    不止父级组件中的props,state也可以。对于自定义控件,你可以传任何自定义的props。这是一种数据流,单向的。

    就是说我也可以使用this.state.父级的状态值,对吗?那子组件既然拿到了父级组件的state也就是说他可以修改父级组件导致父级组件的渲染咯?

    如果你把父级组件的state作为props传给子级

    如何传递?通过子组件的getDefaultProps来获取父级的state吗?

    在使用RN的Text控件时,定义的autoFocus之类的就是props

    这个我得理一理逻辑:
    假设系统组件的props可以传递,假如组件A使用了Text组件,那么Text组件应该算它的子组件,也就是说父级组件可以拿到子组件的props。
    再假设组件A调用组件B,B也可以拿到A的props,就是说子组件可以拿到父级组件的props。
    或者说父级组件可以获取自身的props以及所有子组件的props,而子组件能获取自身的props和父组件的props。父组件可以获得的props比子组件多。可以这么理解吗?


  • administrators

    1、子组件拿到的props是一个值(副本),这个值从哪来,它不知道,即便去修改,也不会导致任何变化
    2、子组件拿不到父组件的props,你只能挑选需要的部分传递。
    3、props就是一种定制属性,

    <牛排 熟度="七分" />
    

    这个属性可以用变量的方式指定,

    <牛排 熟度={this.state.我今天的心情}  />
    

    但<牛排>自己拿到的this.props.熟度 是一个确定的值,它并不知道是你固定的值,还是随你心情的值。



  • @sunnylqm 那如何将父级组件的props传递给子组件?



  • @Violetjack

    <牛排 熟度="七分" />
    

    这里就是在传递属性



  • @sunnylqm 说:

    便去修改,也不会导致任何变化
    2、子组件拿不到父组件的props,你只能挑选需要的部分传递。
    3、props就是一种定制属性,

    在父级使用子级控件时:

    class Child extends React.Component{
         render(){
            return (
                  <View>
                   <Text>{this.props.name}</Text>
                 </View>
             )
         }
    }
    
    class Parent extends React.Component{
          render(){
              return (
                   <Child
                      name={this.props.name}//这个props是parent从其父级得到的
                      />
                  </Child>
               ) 
         }
    }
    

登录后回复