React-Native中props具体使用详解
程序员文章站
2022-05-14 18:57:20
props就是属性,是为了描述一个组件的特征而存在的。它是父组件传递给子组件的。
使用props
通过上一个页面传递
新建一个 propstest.js 文件...
props就是属性,是为了描述一个组件的特征而存在的。它是父组件传递给子组件的。
使用props
通过上一个页面传递
新建一个 propstest.js 文件
exprot default class propstestextendescomponent{ render(){ return <text>{this.props.name}</text> } }
在上一个页面中使用propstest组件
import propstest from './propstest' <propstest name = 'xiaoming' />
注意: 上方代码,均为代码片段。
默认属性,以及它的作用
由于props的属性都是上个页面传递的,所以无法修改它。但是我们可以在propstest文件中,给props定义一些默认的值。
exprot default class propstestextends component{ static defaultprops={ name: 'xiaohong' } render(){ return <text>{this.props.name}</text> } }
注意,defaultprops 需要使用static关键字来做静态修饰。这样,如果上个页面没有传值,则显示的是这个默认的属性。
对props进行约束和检查
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 包中,需要先导入才能使用。
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}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
推荐阅读
-
Python3中使用urllib的方法详解(header,代理,超时,认证,异常处理)
-
详解iOS使用Keychain中的kSecClassGenericPassword存储数据
-
浅谈C#中Process类的使用详解
-
解析C#中@符号的几种使用方法详解
-
使用@符号让C#中的保留字做变量名的方法详解
-
Android Studio中ButterKnife插件的安装与使用详解
-
react-native中AsyncStorage实例详解
-
iOS NSURLProtocol的具体使用方法详解
-
ASP.NET MVC中HtmlHelper控件7个大类中各个控件使用详解
-
iOS中关于信鸽推送的使用demo详解