var index = 1;// index的最外层初始值,亦是全局

var MyPage = React.createClass({
//构成工具栏组件,根据hasBackButton的值为backButton常量赋值,有则渲染出按钮组件,没有则为空。
// 注意:返回按钮的onclick绑定了handleClick的方法,为了弹出提示和移除页面
renderToolbar: function(route, navigator) {
const backButton = route.hasBackButton
? <Ons.BackButton onClick={this.handleClick.bind(this, navigator)}>Back</Ons.BackButton>
: null;
//返回包含上面定义好的backButton内容以及标题的Toolbar组件
return (
<Ons.Toolbar>
<div className='left'>{backButton}</div>
<div className='center'>{route.title}</div>
</Ons.Toolbar>
);
}, // 单击处理事件:在方法被调用时弹出notification的confirm框并根据response值决定是否剔出navigator的数组的最大值
// 这里的response不知道是什么意思,是变化幅度吗?
//通过打印发现,此处的response是confirm框的确认操作和取消操作,确认是1,取消是0,但是是怎么实现的呢?
// 通过这里打印的navigator对象发现里面重要的数组:pages,routes,routesBeforePop
// 从后两者的比较中可以看出多页面是如何实现backup的历史记忆的,他们只是一个记忆数组,按跳转顺序记录页面对象
// 而pages数组则pushPage保存的是已创建的所有页面信息
handleClick: function(navigator) {
ons.notification.confirm('Do you really want to go back?')
.then((response) => {
console.log("response:" + response);
console.log(navigator);
if (response === 1) {
console.log(navigator);
navigator.popPage();
console.log(navigator);
setTimeout("console.log(navigator)",3000);
}
});
}, // 为navigator数组存入页面、同时赋值title为第几个另一个页面、为hasBackButton赋值true,因为是第n层页面了所以理应具备按钮
pushPage: function(navigator) {
navigator.pushPage({
title: `This is new page ${index}`,
hasBackButton: true
});
// 每调用一次pushPage方法,title索引值就增加1
index++;
}, // 使用Page组件构成页面,属性有title以及渲染好的工具栏
renderPage: function(route, navigator) {
return (
<Ons.Page key={route.title} renderToolbar={this.renderToolbar.bind(this, route, navigator)}>
<section style={{margin: '16px', textAlign: 'center'}}>// section是什么,ons的组件?
<Ons.Button onClick={this.pushPage.bind(this, navigator)}>// 使得按钮具有生成页面的功能,调用pushPage
Push Page
</Ons.Button>
</section>
</Ons.Page>
);
}, // 正式渲染显示Navigator组件,属性主要是引入写好的的renderPage,initialRoute是设定首页的title和是否有按钮的常量的默认值
render: function() {
return (
<Ons.Navigator
renderPage={this.renderPage}
initialRoute={{
title: 'First page',
hasBackButton: false
}}
/>
);
}
}); ons.ready(function() {
ReactDOM.render(<MyPage />, document.getElementById('app'));
});

React-onsenui之RouterNavigator组件解读的更多相关文章

  1. react native之组织组件

    这些组件包括<TabView>,<NavigatorView>和<ListView>,他们实现了手机端最常用的交互和导航.你会发现这些组件在实际的项目中会非常有用. ...

  2. React和Vue的组件更新比较

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 24.0px "Helvetica Neue"; color: #404040 } p. ...

  3. reactjs-swiper react轮播图组件基于swiper

    react轮播图组件基于swiper demo地址:http://reactjs-ui.github.io/reactjs-swiper/simple.html 1. 下载安装 npm install ...

  4. React Native之倒计时组件的实现(ios android)

    React Native之倒计时组件的实现(ios android) 一,需求分析 1,app需实现类似于淘宝的活动倒计时,并在倒计时结束时,活动也结束. 2,实现订单倒计时,并在倒计时结束时,订单关 ...

  5. React Native 学习-组件说明和生命周期

    组件的详细说明(Component Specifications) 当通过调用 React.createClass() 来创建组件的时候,你应该提供一个包含 render 方法的对象,并且也可以包含其 ...

  6. React:快速上手(2)——组件通信

    React:快速上手(2)——组件通信 向父组件传递数据 父组件可以通过设置子组件的props属性进行向子组件传值,同时也可以传递一个回调函数,来获取到子组件内部的数据. 效果演示 子组件是输入框,父 ...

  7. 初学React:定义一个组件

    接着聊React,今天说说如何创建一个组件类. <!DOCTYPE html> <html lang="en"> <head> <meta ...

  8. React后台管理系统-file-uploader组件

    1.React文件上传组件github地址: https://github.com/SoAanyip/React-FileUpload 2.Util里边新建file-uploader文件夹,里边新建i ...

  9. 前端笔记之React(二)组件内部State&React实战&表单元素的受控

    一.组件内部的State 1.1 state state叫状态,是每一个类式组件都有的属性,但函数式组件,没有state. state是一个对象,什么值都可以定义. 在任何类式组件的构造函数中,可以用 ...

随机推荐

  1. mysql分组函数及其用例

    功能:用作统计使用,又称为聚合函数或统计函数或组函数 分类:sum 求和.avg 平均值.max 最大值 .min 最小值 .count 计算个数 特点: 1.sum.avg一般用于处理数值型,max ...

  2. Linux Qt cannot find -lGL错误完美解决方案(亲测有效)

    http://c.biancheng.net/view/3901.html 对于很多 Linux 发行版本,Qt 安装完成后如果直接编译或者运行项目,会出现“cannot find -lGL”错误,如 ...

  3. PAT Advanced 1077 Kuchiguse (20 分)

    The Japanese language is notorious for its sentence ending particles. Personal preference of such pa ...

  4. 复试笔试复习 & bd面试总结

    计算机网络: 1.OSI模型中提供端到端服务的是传输层 2.波特率的含义是每秒钟信号变化的次数 3.非屏蔽双绞线中5类网线的数据速率为100Mbps,连接器是RJ-45 4.虚电路在数据链路层实现,电 ...

  5. hadoop本机运行 解决winutils.exe的问题

    如何解决winutils.exe的问题什么原因导致的???windows是客户端,读取linux的文件.客户端没有hadoop的环境重新在windows上面编译hadoop,编译出来window版本的 ...

  6. 给Java新手的一些建议----Java知识点归纳(J2EE and Web 部分)

    J2EE(Java2 Enterprise Edition) 刚出现时一般会用于开发企业内部的应用系统,特别是web应用,所以渐渐,有些人就会把J2EE和web模式画上了等号.但是其实 J2EE 里面 ...

  7. css多种方式实现双飞翼布局

    圣杯布局.双飞翼布局效果图 从效果图来看圣杯布局.双飞翼布局效果是一样一样的.圣杯布局.双飞翼布局就是左右两侧宽度固定,中间内容宽度自适应,即100% 圣杯布局 <style> *{ ma ...

  8. python getattr函数的妙用

    import platform class Test: def test(self): func = getattr(self,'windows') func() @staticmethod def ...

  9. lambda匿名函数sorted排序函数filter过滤函数map映射函数

    lambda函数:表示匿名函数,不需要def来声明,一句话就能搞定. 语法:函数名=lamda 参数:返回值 求10的10次方 f=lambda n:n**n print(f(10)) 注意: 函数名 ...

  10. Java语言Lang包下常用的工具类介绍_java - JAVA

    文章来源:嗨学网 敏而好学论坛www.piaodoo.com 欢迎大家相互学习 无论你在开发哪中 Java 应用程序,都免不了要写很多工具类/工具函数.你可知道,有很多现成的工具类可用,并且代码质量都 ...