React Native声明属性和属性确认
属性声明
因为用React Native创建的自定义组件可以复用, 我们开发过程中可能一个项目组有多个人同时开发,其他同事可能会用到我们自定义的组件, 但是他们使用的时候很容易忘记使用某些属性,这时候我们应该在自定义组件中声明一些属性。
//自定义组件
export default class ConfirmDialog extends Component {
//....
}
ConfirmDialog.propTypes = {
userConfirmed: React.PropTypes.func.isRequired,
userCanceled: React.PropTypes.func.isRequired,
amIStillAlive: React.PropTypes.func.isRequired,
promptToUser:React.PropTypes.string.isRequired
};
上面声明的属性都是 isRequired, 如果不传递这些属性程序会在开发阶段出现警告,开发阶段需要我们进行属性确认。
属性确认
属性确认只在开发阶段有效,上面我们声明了两种属性类型确认——func (函数),和string(字符串)。下面再来看看属性确认的语法:
一、要求属性是JavaScript基本类型
React.PropTypes.array;
React.PropTypes.bool;
React.PropTypes.func;
React.PropTypes.number;
React.PropTypes.object;
React.PropTypes.string;
二、要求属性是可渲染节点
指数字,字符串,数字数组,字符串数组.
React.PropTypes.node
要求属性是某个React元素
React.PropTypes.element
要求属性是某个指定类的实例
React.PropTypes.instanceOf(NameOfClass)
要求属性取值为几个特定的值
React.PropTypes.oneOf(['值1','值2'])
属性可以为指定类型中的任意一个
React.PropTypes.oneOfType([
React.PropTypes.node,
React.PropTypes.string
])
属性可以为指定类型的数组
React.PropTypes.arrayOf(React.PropTypes.number)
要求属性是一个有指定成员变量的对象
下面的语句要求传入的对象有一个成员变量是number类型.
React.PropTypes.objectOf(React.PropTypes.number)
要求属性是一个指定构成方式的对象
React.PropTypes.shape({
color : React.PropTypes.string,
fontSize: React.PropTypes.number
})
属性可以为任意类型
React.PropTypes.any
上面的10种语法,都可以通过在后面加上isRequired声明它是必需的.
属性默认值
我们还可以给属性指定一个默认值,当没有传递该属性时使用默认值,如:
ConfirmDialog.defaultProps = {
promptToUser: '确定吗?'
};
同时记得要将指定 promptToUser为必须的’isRequired’ 去掉.
React Native声明属性和属性确认的更多相关文章
- 从零学React Native之12 组件的生命周期
一个React Native组件从它被加载,到最终被卸载会经历一个完整的生命周期.所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解生命周期,是合理开发的关键. ES6语法和之前的ES5 ...
- React Native(一) FlexBox布局
欢迎转载,转载请标明出处: http://blog.csdn.net/johnny901114/article/details/53241550 本文出自:[余志强的博客] 在React Native ...
- React Native专题-江清清
本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入门,基础,进阶相关讲解. 刚创建的React Native交流8群:533435865 欢迎各位大牛, ...
- React Native 常用插件案例
(二).基础入门: 1.React Native For Android环境配置以及第一个实例 2.React Native开发IDE安装及配置 3.React Native应用设备运行(Runnin ...
- 从零学React Native之11 TextInput
TextInput 组件是用来通过键盘输入文字,可以使用View组件和Text组件样式,没有自己特定的样式. 与Text组件类似,TextInput组件内部的元素不再使用FlexBox布局,而采用文本 ...
- 从零学React Native之07View
View 组件是React Native最基本的组件.绝大部分其他React Native 组件. View组件的颜色和边框 backgroundColor 键用来指定颜色. RN 0.19版本开始, ...
- 📝 没 2 年 React Native 开发经验,你都遇不到这些坑
如果你喜欢我的文章,希望点赞 收藏 评论 三连支持一下,谢谢你,这对我真的很重要! React Native 开发时,如果只是写些简单的页面,基本上按着官方文档 reactnative.dev就能写出 ...
- 4、手把手教React Native实战之flexbox布局(伸缩属性)
###伸缩项目的属性 1.order 定义项目的排列顺序,数值越小,排列越靠前,默认值为0,语法为:order:整数值 2.flex-grow 定义伸缩项目的放大比例,默认值为0,即表示如果存在剩余空 ...
- React Native中pointerEvent属性
在React Native界面开发中, 如果使用绝对定位布局,在代码运行时的某个时刻有可能会遮盖住它的下方的某个组件.这是因为绝对定位只是说这个组件的位置由它父组件的边框决定. 绝对定位的组件可以被认 ...
随机推荐
- Vue-cli3.x在开发环境中(router采用 history模式)出现Failed to resolve async component default: Error: Loading chunk {/d} failed.或者Uncaught SyntaxError: Unexpected token <错误
使用Vue-cli3.x开发环境中(router采用 history模式)出现Failed to resolve async component default: Error: Loading chu ...
- 使用Jedis操作Redis-使用Java语言在客户端操作---对key的操作
//添加String类型的模拟数据. jedis.set("mykey", "2"); jedis.set("mykey2", " ...
- C# WPF 如何禁止窗口拖到屏幕边缘自动最大化
win7以上的系统新增了功能--窗口拖到屏幕边缘自动最大化
- 我的第一个可用的Windows驱动完成了
看到了一些希望,就值得我继续执着下去. 虽然是很简单的一个小驱动,但是它包含了我学编程两年来的憧憬与努力... 在2011年5月份,我就想学驱动,但是多次的失败,让我很不耐烦,所以暂时搁置了.... ...
- TP5.1 分页CSS样式(转载)
效果如图: 1.在extend\目录下创建page目录,在page目录中创建Page.php文件,将以下代码放入文件中 <?php namespace page; use think\Pagin ...
- ML面试1000题系列(1-20)
本文总结ML面试常见的问题集 转载来源:https://blog.csdn.net/v_july_v/article/details/78121924 1.简要介绍SVM 全称是support vec ...
- svn利用钩子脚本功能实现代码同步到web目录
一.hook简单介绍 为了方便管理员控制提交的过程 ,Subversion提供了hook机制.当特定的 事件发生时,相应的 hook会被调用,hook其实就相当于特定事件的处理函数.每个hook会得到 ...
- MyEclipse优化】-----如何合理设置MyEclipse中的validation选项
打开eclipse,点击[window]菜单,选择[preferences]选项. 在左侧点击[validation]选项,在右侧可以看到eclipse进行的自动检查都有哪些内容. 将Manual(手 ...
- C++ UNREFERENCED_PARAMETER函数的作用
新建win32 application程序,会有这样一段代码 int APIENTRY wWinMain(_In_ HINSTANCE hInstance, _In_opt_ HINSTANCE hP ...
- C++学习笔记----4.5 C++继承时的对象内存模型
推荐阅读:http://blog.csdn.net/randyjiawenjie/article/details/6693337 最近研究了一下,C++继承的内存对象模型.主要是读了读http://b ...