登录 立即注册
金钱:

Code4App-iOS开发-iOS 开源代码库-iOS代码实例搜索-iOS特效示例-iOS代码例子下载-Code4App.com

React-Native中props使用详解 [复制链接]

2017-9-13 16:36
KB_MoreShare 阅读:55 评论:1 赞:0
Tag:  

props解释

props就是属性,是为了描述一个组件的特征而存在的。它是父组件传递给子组件的。
使用props
通过上一个页面传递

新建一个 PropsTest.js 文件

exprot default class PropsTest extendes Component{

render(){
    return <Text>{this.props.name}</Text>
}

}

在上一个页面中使用PropsTest组件

import PropsTest from './PropsTest'

<PropsTest

name = 'XiaoMing'

/>

注意: 上方代码,均为代码片段。

默认属性,以及它的作用

由于props的属性都是上个页面传递的,所以无法修改它。但是我们可以在PropsTest文件中,给props定义一些默认的值。

exprot default class PropsTest extends Component{

static defaultProps={
    name: 'XiaoHong'
}
render(){
    return <Text>{this.props.name}</Text>
}

}

注意,defaultProps 需要使用static关键字来做静态修饰。这样,如果上个页面没有传值,则显示的是这个默认的属性。

对props进行约束和检查

exprot default class PropsTest extends 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 包中,需要先导入才能使用。

props延伸操作符

ES6的最新语法

假如我们的组件需要好多属性,如下:

params = {name: 'XiaoZhang', age: 18, sex: '男'}

// 如果需要传递给下一个页面需要:
<PropsTest

name = {params.name}
sex = {params.sex}
age = {params.age}

/>
// 等等,这样如果属性特别多,代码将会变得难以维护。

在ES6中可以使用最新的延伸操作符特性

<PropsTest

{...params}

/>

非常的简洁

props解构赋值

ES6的最新语法

通过延伸操作符传递的对象,在另一个组件中想要从中获取某几个来使用,可以用解构赋值的方式

var {name, age} = params;

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

{name}或{age}

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

{params.name}或{params.age}

分享到:
我来说两句
facelist
您需要登录后才可以评论 登录 | 立即注册
所有评论(1)
BeatBeat 2017-9-14 11:01
感谢分享。  
回复
关闭

每日头条

通过邮件订阅最新 Code4App 信息
上一条 /4 下一条
联系我们
关闭
合作电话:
13802416937
Email:
435399051@qq.com
商务市场合作/投稿
问题反馈及帮助
联系我们

广告投放| Github|申请友链|手机版|Code4App ( 粤ICP备15117877号-1 )

返回顶部