属性声明

因为用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声明属性和属性确认的更多相关文章

  1. 从零学React Native之12 组件的生命周期

    一个React Native组件从它被加载,到最终被卸载会经历一个完整的生命周期.所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解生命周期,是合理开发的关键. ES6语法和之前的ES5 ...

  2. React Native(一) FlexBox布局

    欢迎转载,转载请标明出处: http://blog.csdn.net/johnny901114/article/details/53241550 本文出自:[余志强的博客] 在React Native ...

  3. React Native专题-江清清

    本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入门,基础,进阶相关讲解. 刚创建的React Native交流8群:533435865  欢迎各位大牛, ...

  4. React Native 常用插件案例

    (二).基础入门: 1.React Native For Android环境配置以及第一个实例 2.React Native开发IDE安装及配置 3.React Native应用设备运行(Runnin ...

  5. 从零学React Native之11 TextInput

    TextInput 组件是用来通过键盘输入文字,可以使用View组件和Text组件样式,没有自己特定的样式. 与Text组件类似,TextInput组件内部的元素不再使用FlexBox布局,而采用文本 ...

  6. 从零学React Native之07View

    View 组件是React Native最基本的组件.绝大部分其他React Native 组件. View组件的颜色和边框 backgroundColor 键用来指定颜色. RN 0.19版本开始, ...

  7. 📝 没 2 年 React Native 开发经验,你都遇不到这些坑

    如果你喜欢我的文章,希望点赞 收藏 评论 三连支持一下,谢谢你,这对我真的很重要! React Native 开发时,如果只是写些简单的页面,基本上按着官方文档 reactnative.dev就能写出 ...

  8. 4、手把手教React Native实战之flexbox布局(伸缩属性)

    ###伸缩项目的属性 1.order 定义项目的排列顺序,数值越小,排列越靠前,默认值为0,语法为:order:整数值 2.flex-grow 定义伸缩项目的放大比例,默认值为0,即表示如果存在剩余空 ...

  9. React Native中pointerEvent属性

    在React Native界面开发中, 如果使用绝对定位布局,在代码运行时的某个时刻有可能会遮盖住它的下方的某个组件.这是因为绝对定位只是说这个组件的位置由它父组件的边框决定. 绝对定位的组件可以被认 ...

随机推荐

  1. 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 ...

  2. 使用Jedis操作Redis-使用Java语言在客户端操作---对key的操作

    //添加String类型的模拟数据. jedis.set("mykey", "2"); jedis.set("mykey2", " ...

  3. C# WPF 如何禁止窗口拖到屏幕边缘自动最大化

    win7以上的系统新增了功能--窗口拖到屏幕边缘自动最大化

  4. 我的第一个可用的Windows驱动完成了

    看到了一些希望,就值得我继续执着下去. 虽然是很简单的一个小驱动,但是它包含了我学编程两年来的憧憬与努力... 在2011年5月份,我就想学驱动,但是多次的失败,让我很不耐烦,所以暂时搁置了.... ...

  5. TP5.1 分页CSS样式(转载)

    效果如图: 1.在extend\目录下创建page目录,在page目录中创建Page.php文件,将以下代码放入文件中 <?php namespace page; use think\Pagin ...

  6. ML面试1000题系列(1-20)

    本文总结ML面试常见的问题集 转载来源:https://blog.csdn.net/v_july_v/article/details/78121924 1.简要介绍SVM 全称是support vec ...

  7. svn利用钩子脚本功能实现代码同步到web目录

    一.hook简单介绍 为了方便管理员控制提交的过程 ,Subversion提供了hook机制.当特定的 事件发生时,相应的 hook会被调用,hook其实就相当于特定事件的处理函数.每个hook会得到 ...

  8. MyEclipse优化】-----如何合理设置MyEclipse中的validation选项

    打开eclipse,点击[window]菜单,选择[preferences]选项. 在左侧点击[validation]选项,在右侧可以看到eclipse进行的自动检查都有哪些内容. 将Manual(手 ...

  9. C++ UNREFERENCED_PARAMETER函数的作用

    新建win32 application程序,会有这样一段代码 int APIENTRY wWinMain(_In_ HINSTANCE hInstance, _In_opt_ HINSTANCE hP ...

  10. C++学习笔记----4.5 C++继承时的对象内存模型

    推荐阅读:http://blog.csdn.net/randyjiawenjie/article/details/6693337 最近研究了一下,C++继承的内存对象模型.主要是读了读http://b ...