Raect Native之五 props的使用

1. 什么是props？
   大多数组件在创建时就可以使用各种参数来进行定制。用于定制的这些参数就称为props

2. 如何使用props？

   export default class PropsView extends Component {
       render() {
           var  params = {name:'zhangsan', age:19,sex:'女'}
           var {name,sex} = params;
           return <View>
                   {/* <PropsUse {...params}/> */}
                   <PropsUse name={name} sex={sex}/>
               </View>
       }
   }
   

      export default class PropsUse extends Component{
          static defaultProps={
             name:'小红',
             age:10,
             sex:'男',
          }
      
          static propTypes={
             name:PropTypes.string,
             age:PropTypes.int,
             sex:PropTypes.string.isRequired,
          }
          render(){
             
              return <View>
                      <Text style={{fontSize:26}}>你好， { this.props.name} </Text>
                      <Text style={{fontSize:26}}>年龄： { this.props.age}</Text>
                      <Text style={{fontSize:26}}>性别： { this.props.sex}</Text>
              </View> 
          }
      }
   

3. 什么是默认属性以及它的作用？
   static defaultProps 设置默认属性，当前一个界面没有数据传过来时，
   使用默认赋值

     static defaultProps={
             name:'小红',
             age:10,
             sex:'男',
          }
           ```
   

4. 如何对props进行约束和检查？
   PropTypes 进行约束和检查
   name:PropTypes.string 数据类型进行约束
   sex:PropTypes.string.isRequired isRequired非null检查

      import PropTypes from 'prop-types';
      static propTypes={
         name:PropTypes.string,
         age:PropTypes.int,
         sex:PropTypes.string.isRequired,
   }
   
   

5. props的使用技巧

   1. 扩展运算符{…}

      var  params={name:'zhangsan', age:19,sex:'女'}
      {...params}
   

   2. 结构赋值

      var  params = {name:'zhangsan', age:19,sex:'女'}
      var {name,sex} = params;
      return <View>
                  <PropsUse name={name} sex={sex}/>
              </View>
   

练习项目