源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

React-Native中props具体使用详解

  • 时间:2022-10-31 14:40 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:React-Native中props具体使用详解
props就是属性,是为了描述一个组件的特征而存在的。它是父组件传递给子组件的。 [b]使用props[/b] 通过上一个页面传递 新建一个 PropsTest.js 文件
exprot default class PropsTestextendesComponent{
  render(){
    return <Text>{this.props.name}</Text>
  }
}
在上一个页面中使用PropsTest组件
import PropsTest from './PropsTest'

<PropsTest 
  name = 'XiaoMing'
/>
注意: 上方代码,均为代码片段。 [b]默认属性,以及它的作用[/b] 由于props的属性都是上个页面传递的,所以无法修改它。但是我们可以在PropsTest文件中,给props定义一些默认的值。
exprot default class PropsTestextends Component{
  static defaultProps={
    name: 'XiaoHong'
  }
  render(){
    return <Text>{this.props.name}</Text>
  }
}
注意,defaultProps 需要使用static关键字来做静态修饰。这样,如果上个页面没有传值,则显示的是这个默认的属性。 [b]对props进行约束和检查[/b]
exprot default class PropsTestextends Component{
  static defaultProps={
    name: 'XiaoHong'
  }
  static propTypes={
    name: PropTypes.string,
    age: PropTypes.number,
    sex: PropTypes.string.isRequired
  }
  render(){
    return <Text>{this.props.name}</Text>
  }
}
对props里面的属性进行类型判断,可以使用propTypes来做到,同样需要使用static关键字来修饰。 isRequired 可以指定必填项 注意: propTypes属性 在 react 包中,需要先导入才能使用。 [b]props延伸操作符[/b] ES6的最新语法 假如我们的组件需要好多属性,如下:
params = {name: 'XiaoZhang', age: 18, sex: '男'}

// 如果需要传递给下一个页面需要:
<PropsTest
  name = {params.name}
  sex = {params.sex}
  age = {params.age}
/>
// 等等,这样如果属性特别多,代码将会变得难以维护。

在ES6中可以使用最新的延伸操作符特性
<PropsTest
  {...params}
/>
非常的简洁 [b]props解构赋值[/b] ES6的最新语法 通过延伸操作符传递的对象,在另一个组件中想要从中获取某几个来使用,可以用解构赋值的方式
var {name, age} = params;

// 其他地方就可以直接引用name和age了

{name}或{age}

// 这么做的好处,同样是不需要使用如下的传统方式

{params.name}或{params.age}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程素材网。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部