Raect Native之五 props的使用

最新推荐文章于 2022-10-09 17:47:12 发布

原创最新推荐文章于 2022-10-09 17:47:12 发布 · 329 阅读

0 ·

CC 4.0 BY-SA版权

Android基础同时被 2 个专栏收录

110 篇文章

订阅专栏

React Native基础

13 篇文章

订阅专栏

本文深入讲解React中的Props概念，包括其定义、使用方法、默认属性设置及类型检查。通过实例演示了Props的传递、默认值设定与PropTypes的使用，帮助开发者掌握组件间的数据传递技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

如何使用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> 
       }
   }

什么是默认属性以及它的作用？
static defaultProps 设置默认属性，当前一个界面没有数据传过来时，
使用默认赋值
```
  static defaultProps={
          name:'小红',
          age:10,
          sex:'男',
       }
        ```
```
如何对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,
}
```

props的使用技巧

扩展运算符{…}

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

结构赋值

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

练习项目