第一印象开发代码demo.html&!DOCTYPE html&&
& & charset=&UTF-8& /&
& &&Hello React!&
& & src=&build/react.js&&&
& & src=&build/react-dom.js&&&
& & src=&/ajax/libs/babel-core/5.8.23/browser.min.js&&&
& & id=&example&&&
& & type=&text/babel&&
& & &ReactDOM.render( & & & &&Hello, world!&,
& & & &document.getElementById('example')
& & &); & &&
&&&开发代码将 JSX 转换后，上线的代码：helloworld.jsReactDOM.render(
&React.createElement('h1', null, 'Hello, world!'), &document.getElementById('example')
);demo.html&!DOCTYPE html&&
& & charset=&UTF-8& /&
& &&Hello React!&
& & src=&build/react.js&&&
& & src=&build/react-dom.js&&&
& & id=&example&&&
& & src=&build/helloworld.js&&&
&&&React是什么React 是一个 UI 库，具体说 React 是做 UI 组件的 JavaScript 库，也就是用 JS 写前端UI。不同于 Angular 是一个完整的框架，React 仅仅只是 VIEW 层。官方定义：A Javascript Library For Building User Interfaces 。hello 组件var Hello = React.createClass({ & &render: function() { & & & &return &div&Hello {this.props.name}&/div&;
ReactDom.render(&Hello name=&World& /&, document.getElementById('container'));Timer 组件var Timer = React.createClass({
&getInitialState: function() { & &return {secondsElapsed: 0};
&tick: function() { & &this.setState({secondsElapsed: this.state.secondsElapsed + 1});
&componentDidMount: function() { & &this.interval = setInterval(this.tick, 1000);
&componentWillUnmount: function() {
& &clearInterval(this.interval);
&render: function() { & &return ( & & &&Seconds Elapsed: {this.state.secondsElapsed}&
ReactDom.render( /&, document.getElementById('container'));Timer 组件结合 webpack 的使用Hello.jsx定义组件var React = require('react');var Timer = React.createClass({
&getInitialState: function() { & &return {secondsElapsed: 0};
&tick: function() { & &this.setState({secondsElapsed: this.state.secondsElapsed + 1});
&componentDidMount: function() { & &this.interval = setInterval(this.tick, 1000);
&componentWillUnmount: function() {
& &clearInterval(this.interval);
&render: function() { & &return ( & & &&Seconds Elapsed: {this.state.secondsElapsed}&
module.exports = Tindex.js使用组件var React = require('react');var ReactDom = require('react-dom');var Timer = require('Timer');
ReactDom.render(&Timer /&, document.getElementById('container'));优势api 少，类库易学Top-Level APIComponent APIComponent Specs and Lifecycle组件内聚，易于组合原生组件和自定义组件融合渲染状态/属性驱动全局更新，不用关注细节更新propsstatecommonjs 生态圈/工具链完善（webpack）webpack四个概念JSX （可选的）组件Virtual DomData Flow 单向数据绑定这是 react 四个主要的知识点。本文只简单介绍总结 JSX 和组件。JSXJSX 语法是类似 Html 的xml格式。注意和 Html 语法不太一样，比如必须是驼峰命名，以及属性名不能和 JS 关键字冲突，例如：className，readOnly。一、JSX 是可选的使用 JSXvar HelloMessage = React.createClass({
&render: function() { & &return &div&Hello {this.props.name}&/div&;
ReactDOM.render(&HelloMessage name=&John& /&, mountNode);不使用 JSX&use strict&;var HelloMessage = React.createClass({
&displayName: &HelloMessage&,
&render: function render() { & &return React.createElement( & & &&div&, & & &null, & & &&Hello &, & & &this.props.name
ReactDOM.render(React.createElement(HelloMessage, { name: &John& }), mountNode);二、JSX 嵌入变量可以通过 {变量名} 来将变量的值作为属性值var HelloMessage = React.createClass({ &render: function() { & &return &div&name: {this.props.name}, age: {this.props.age}&/div&;
});var user = {&name&:&jack&, age:29};
ReactDOM.render(&User user={user} /&, mountNode);三、JSX 熟悉扩散&JSX Spread Attributes可以用通过 {...obj} 来批量设置一个对象的键值对到组件的属性，注意顺序,因为熟悉可以被覆盖var HelloMessage = React.createClass({ &render: function() { & &return &div&name: {this.props.name}, age: {this.props.age}&/div&;
});var user = {&name&:&jack&, age:29};
ReactDOM.render(&User {...user} name=&override name&/&, mountNode);四、属性值可以使用 Javascript 表达式return ( &&
& &{loggedIn ?
/&} &&);五、需要自闭组件（标签）Self-Closing Tag组件（标签）需要闭合。var HelloMessage = React.createClass({
&render: function() { & &return (
& & &&div&
& & & & & &MyComponent /&
& & & & & &MyComponent & &
& & & & & &img src=&#& /&
& & & & & &img src=&#& &
& & &&/div&
});六、一个组件只能返回一个跟节点&Maximum Number of JSX Root Nodes组件的render函数只能返回一个根节点，如果包含多个子组件，需要使用div或者span或者其他组件包裹。var HelloMessage = React.createClass({
&render: function() { & &return (
& & &&div&
& & & & & &MyComponent /&
& & & & & &img src=&#& /&
& & &&/div&
});var HelloMessage = React.createClass({
&render: function() { & &return (
& & &&MyComponent /&
& & &&img src=&#& /&
});七、JSX中的 false常见的三种场景Renders as id=&false&:ReactDOM.render(&id={false}&/&, mountNode);String &false& as input value:ReactDOM.render(&input&value={false} /&, mountNode);No child:ReactDOM.render(&{false}&, mountNode);这里不会渲染成字符串 false 作为div的子组件。这种做法类似我们常见的一种用法：&{x & 1 && 'You have more than one item'}&组件组件有两个核心的概念：props 属性，由外面的 JSX 熟悉传入，永远是只读的，之后建议不要修改。主要用于数据的展示、父子组件的数据传递。state 状态，组件可以理解为一个状态机，fn(state)=&UI。一旦状态发生改变，组件会自动 render 方法重新渲染UI。开发组件时，应该让状态尽可能的少，但能完全表达整个UI，这样组件逻辑就容易维护。无状态组件（stateless function）: 使用纯粹的函数可以定义无状态的组件。这种组件只是简单的从外面接受 props 渲染 DOM。var React = require('react');
require('../css/gotop.css');
//Stateless functional components
var Top = function () {
& &return ( & & & & className=&back-top&&
& & & & & & className=&code&&
& & & & & & & & className=&code-box&&&& src=&http://cdn./images/wwq_wx_qrcode.jpg& alt=&玩物圈微信二维码&/&&
& & & & & &&
& & & & & & href=&#top& className=&top&&&
module.exports = T通常的做法是：一个顶级父组件为中包括状态和逻辑，通过props传递数据给各个子组件，而子组件是没有状态的，子组件只关注数据的渲染。参考Most of your components should simply take some data from props and render it. However, sometimes you need to respond to user input, a server request or the passage of time. For this you use state.Try to keep as many of your components as possible stateless. By doing this you'll isolate the state to its most logical place and minimize redundancy, making it easier to reason about your application.A common pattern is to create several stateless components that just render data, and have a stateful component above them in the hierarchy that passes its state to its children via props. The stateful component encapsulates all of the interaction logic, while the stateless components take care of rendering data in a declarative way.这种做法在 redux（单向数据流 Flux 模式的一种实现）中显得很明显。可客空间(gh_ff02f1bc28ce)　
　文章为作者独立观点，不代表微头条立场
的最新文章
PHP-FPM 作为 FastCGI 进程管理器而广为熟知，它是 PHP FastCGI 实现的改进，带有更一. 调优需要关注的几个方面内存调优CPU 使用调优锁竞争调优I/O 调优二. Twitter 最大的敌人：HTML5作为新兴领域越来越热。然而在移动设备硬件性能弱于PC的背景下，对性能的需求显得更为重要，而HTML5性能优化前与优化后有着极大的差别，如何优化才能提高性能，对此熟知的人很少。使用VS Code 从零开始开发调试.NET Core 1.0。.NET Core 是一个开源的、跨平台的 快捷键之在工作表中移动和滚动向上、下、左或右移动单元格箭头键 移动到当前数据区域的边缘：CTRL+ 箭头键 CSS3 Media Queries在iPhone，iPad 等常用设备的设置方法常用设备的 CSS3 Me下拉菜单是一个很常见的效果，在网站设计中被广泛使用。通过使用下拉菜单，设计者不仅可以在网站设计中营造出色的视HTML5作为新兴领域越来越热。然而在移动设备硬件性能弱于PC的背景下，对性能的需求显得更为重要，而HTML5性能优化前与优化后有着极大的差别，如何优化才能提高性能，对此熟知的人很少。这是《为什么我从Python转换到Node.js》这篇文章的后续。《为什么我从Python转换到Node.jMac 系统一向以提供高效的工作环境著称，iOS、Android和服务端程序员都可以轻松的在Mac上搭建舒适为啥js中有闭包这个东西，其他后台语言里没有？当一个函数调用时，内部变量的查找会按作用域链条来查找，按理说不为啥js中有闭包这个东西，其他后台语言里没有？当一个函数调用时，内部变量的查找会按作用域链条来查找，按理说不者在正式发布之前就测试代码，包括一些新的API，甚至于也可以提前反馈那些对于我们来说有些困扰的变化。这次的发1. 对话保持的解决方案。要求：1、app中使用webview访问具体网站的内容，但是app与服务器的沟通是 盒模型接触过 CSS 的人应该都知道 CSS 的盒模型：由内容边缘（Content edge）包围形成的是诸如 、、 这样的表单组件不同于其他组件，因为他们可以通过于大多数开发者来说，JavaScript 的 this 关键字会造成诸多困扰。由于JavaScript 不具一、timing-function: steps() 　　一开始在使用CSS3的时候并没有太注意这个timi第一印象开发代码demo.htmlgh_ff02f1bc28ce一起奋斗，创业之家热门文章最新文章gh_ff02f1bc28ce一起奋斗，创业之家初探 React 组件
(window.slotbydup=window.slotbydup || []).push({
id: '2611110',
container: s,
size: '240,200',
display: 'inlay-fix'
您当前位置： &
[ 所属分类
| 时间 2015 |
作者 红领巾 ]
React 的核心思想就是使用组件化的思想来开发出一个个独立的组件，然后将组件再拼装成一个完整的应用，从 MVC 分层思想上来考虑的话，React 专注在 UI 展现层上。
在React 的骨架 JSX 一文中，有详细的讲解过使用 JSX 来开发组件的结构，也提到了使用 Inline Style 可以给组件定义样式，这样能确保组件的独立性。除了结构和样式，一个独立完整的组件还包含一些其他的部分。
从一个简单的 Dropdown 组件来开启我们的 React 组件化之路。
首先需要说明的是，Demo 的代码都是 ES6 的语法，之后的 React 文章中用到的
代码都将使用 ES6 的语法，如果你还不了解 ES6 ，建议先了解一下它的语法。另外考虑到 Demo 代码量的问题忽略了组件的样式部分，假设样式是通过外链或 Inline Style 的形式加载进来的。
// dropdown.jsclass Dropdown ponent () { constructor (props) {
super(props);
this.state = {
visibile: false
}; } onClick = () =& {
this.setState({
visible: !this.state.visible
}); } render () {
const displayValue = this.visible ? 'block' : 'none';
&div className="dropdown"&
&button onClick={this.onClick}&Browsers&/button&
&ul style={{display: displayValue}}&
&li&&a href="#"&Firefox&/a&&/li&
&li&&a href="#"&Chrome&/a&&/li&
&li&&a href="#"&Safari&/a&&/li&
&li&&a href="#"&Opera&/a&&/li&
&li&&a href="#"&Internet Expoler&/a&&/li&
&/div& }};export default D
state 状态
React 的组件使用 状态机 的概念来描述 组件本身的可变数据 部分。Dropdown 组件最基本的用户交互逻辑可以抽象成两个状态 收起 和 展开 ，进一步用代码来描述就是 visible: false（收起） 和 visible: true（展开） 。
要获取组件的状态都需要通过 this.state 来获取，在 constructor（构造函数） 中，可以通过 this.state 来设置组件的 初始状态 。
要改变状态就必须通过 this.setState 方法来改变，不能通过直接修改 this.state.xxx = "xxx" 来进行修改，因为 this.state 的值是 immutable（不可变） 的。可以认为 state 有自己的 setter 和 getter 方法，这样能更好的理解。
将 visible: false/true 的状态用于关联到菜单的展开和收起的两种样式，点击的时候通过切换两种状态，React 根据状态来自动更新 UI。
如果按照传统的开发逻辑，我们要控制 Dropdown 菜单的收起和展开，需要先获取到菜单的 DOM 元素，然后在点击时，直接改变 DOM 元素的样式。
React 使用状态机来简化了繁琐的 DOM 操作，传统开发模式中繁琐的 DOM 操作都可以转变成状态的改变，底层的 DOM 操作由 React 来接管。如果你在使用 React 开发应用的时候想着应该怎么操作 DOM，这时候需要反思一下是不是使用 React 的方式有问题。
props 属性
如果要把 Dropdown 组件做成公用的，我们需要做进一步的改进和优化。Dropdown 的按钮内容以及菜单的内容都需要依赖父组件来传递。
父组件将数据传递给子组件，这个时候就需要通过 props 来传递了。
// app.js// 加载Dropdown组件import Dropdown from './dropdown';class App ponent { constructor (props) {
super(props); } static defaultProps = {
dropdownBtn: 'Browsers',
dropdownItems: [
'Firefox',
'Internet Expoler'
] } render () {
&h1&This is a Dropdown demo.&/h1&
btnText={this.props.dropdownBtn}
items={this.props.dropdownItems} /&
&/div& }};
App 组件中需要用到 Dropdown 组件，先使用 import 来加载该组件。将 Dropdown 需要用到的数据存储到 App 组件的默认的 props 中。
// 组件默认的props都可以存放到这里static defaultProps = {...}
然后使用属性声明的方式传递给 Dropdown 组件。
// this.props包含了App中所有的属性&Dropdown btnText={this.props.dropdownBtn} items={this.props.dropdownItems} /&
Dropdown 在接收到来自父组件的数据，也是通过 this.props 来访问。这里需要注意父子组件都有 props ，都能通过 this.props 来访问，父组件是组件内部默认定义的，而子组件的是来自父组件的传递。
在 Dropdown 中使用父组件传递过来的 props ，将原来的 render 方法稍做改进。
render () { const displayValue = this.visible ? 'block' : 'none'; &div className="dropdown"&
&button onClick={this.onClick}&{this.props.dropdownBtn}&/button&
&ul ref="dropdown-menu" style={{display: displayValue}}&
this.props.dropdownItems.map((item) =& (
&li&&a href="#"&{item}&/a&&/li&
&/ul& &/div&}
子组件在接受父组件的数据时，可以对数据类型进行校验，并且可以校验数据是否可选，如果传递的数据结果不匹配，React 会给出提示，这对于应用的健壮性来说是一个非常好的设计，建议组件在接收数据的时候最好都能进行数据校验，这样能避免很多因为数据格式问题引起的异常。
在 Dropdown 的组件中，这些数据都是必须传递的，可以指定校验为必需。
static propTypes = {
// 指定按钮内容是必需的，并且类型为字符串
dropdownBtn: React.PropTypes.isRequired.string,
// 指定items的数据是必需的，并且类型为数组
dropdownItems: React.PropTypes.isRequired.array}
更多的数据类型说明，请参见 属性校验的官方文档 。
event 事件
React 有自己实现的事件系统，该事件系统是基于标准 W3C 的 DOM 事件，并在此基础上对事件进行了封装，抹平了不同浏览器之间兼容性差异。为 Virtual DOM 绑定事件，直接在元素上使用驼峰式的属性声明的方式即可。
&button onClick={this.onClick}&{this.props.dropdownBtn}&/button&...// event对象也传递给了事件处理函数onClick = (event) =& {
// console.log(event.type) =& click
this.setState({
visible: !this.state.visible
在事件处理函数中，其 this 并不指向组件类，可以通过在构造函数中使用 bind 来改变，也可以用最简单的 ES6 的箭头函数。
想查看的 React 的事件系统支持哪些类型的事件，或者 event 对象都包含了哪些可用的属性，可以查看关于 事件的官方文档 。
lifecycle 生命周期
React 的组件有几大生命周期，在这些生命周期内，组件本身提供了一些事件接口，这些事件和 Virtual DOM 的事件不一样，是组件本身会触发的事件。
生命周期按照阶段来划分的话，按照先后顺序分为 5 个阶段：
1. 初始化（指定默认的 state 和 props 来初始化组件）；
2. 渲染（ render ）；
3. 装载（ mount ，装在前和装载完毕都有相应的事件）；
4. 更新（ state 和 props 的更新，都会触发相应的事件）；
5. 卸载（ unmount 组件销毁）；
再回到上面的 App 组件中，如果 Dropdown 的数据是依赖于服务器异步数据的话，可以利用组件的生命周期事件来加载数据。
给 App 组件增加一个 componentWillMount 事件，该事件会在组件即将装载的时候触发。
// app.jsimport Dropdown from './dropdown';class App ponent { constructor (props) {
super(props);
// 设置一个空的state对象
// 当第一次render的时候，直接使用state不会报错
this.state = {}; } componentWillMount () {
// 使用fetch来获取一个数据
fetch('/data')
.then((response) =& response.json())
.then((response) =& {
// 数据加载成功后通过setState改变状态
this.setState({
dropdownBtn: response.dropdownBtn,
dropdownItems: response.dropdownItems
}); } render () {
// 第一次render的时候state并没有数据
// 当数据加载成功调用了setState后才会有数据，这时组件会重新render
&h1&This is a Dropdown demo.&/h1&
btnText={this.state.dropdownBtn}
items={this.state.dropdownItems} /&
App 组件传递给 Dropdown 将原来的静态数据改成了动态数据，所以要将 props 换成 state 。Dropdown 组件也需要将原来的数据校验做一些调整。
最终的 Dropdown 完整的代码是下面这样的。
// dropdown.jsclass Dropdown ponent () { constructor (props) {
super(props);
this.state = {
visibile: false
}; } static propTypes = {
// 指定按钮内容是必需的，并且类型为字符串
dropdownBtn: React.PropTypes.string,
// 指定items的数据是必需的，并且类型为数组
dropdownItems: React.PropTypes.array } onClick = (event) =& {
// console.log(event.type) =& click
this.setState({
visible: !this.state.visible
}); } render () {
const displayValue = this.visible ? 'block' : 'none';
&div className="dropdown"&
&button onClick={this.onClick}&{this.props.dropdownBtn}&/button&
&ul ref="dropdown-menu" style={{display: displayValue}}&
this.props.dropdownItems.map((item) =& (
&li&&a href="#"&{item}&/a&&/li&
而要将组件放到页面中渲染，可以通过 React.render 来调用。
&div id="root"&&/div&...React.render(
document.getElementById('root'));
本文前端（javascript）相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程
转载请注明本文标题：本站链接：
分享请点击：
1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责；
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性，不作出任何保证或承若；
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
每一次烦恼的出现，都是一个给我们寻找自己缺点的机会。
手机客户端
，专注代码审计及安全周边编程，转载请注明出处：http://www.codesec.net
转载文章如有侵权，请邮件 admin[at]codesec.netReactJS实现的通用分页组件 - 天真的好蓝啊 - 博客园
&&& 大家多少都自己写过各种版本的分页工具条吧，像纯服务版的，纯jsWeb板的，Angular版的，因为这个基础得不能再基础的功能太多地方都会用到，下面我给出以个用ReactJS实现的版本，首先上图看下效果：&&&
&&& 注意这个组件需要ES6环境，最好使用NodeJS结合Webpack来打包：webpack --display-error-details --config webpack.config.js
&&& 此React版分页组件请亲们结合redux来使用比较方便，UI = Fn(State)&&& 基本流程就是：用户交互-&Action-&Reduce-&Store-&UIRender&&& 了解以上基础知识却非常必要，但不是我此次要说的重点，以上相关知识请各位自行补脑，废话就不多说，直接上代码。
&& filename: paging-bar.js
1 import React, { Component } from 'react'
2 import Immutable from 'immutable'
3 import _ from 'lodash'
5 /* ================================================================================
* React GrxPagingBar 通用分页组件
* author: 天真的好蓝啊
* ================================================================================ */
9 class GrxPagingBar extends Component {
render() {
var pagingOptions = {
showNumber: 5,
firstText: "&&",
firstTitle: "第一页",
prevText: "&",
prevTitle: "上一页",
beforeTitle: "前",
afterTitle: "后",
pagingTitle: "页",
nextText: "&",
nextTitle: "下一页",
lastText: "&&",
lastTitle: "最后一页",
classNames: "grx-pagingbar pull-right",
$.extend(pagingOptions, this.props.pagingOptions)
&div className={pagingOptions.classNames} &
&GrxPagingFirst {...pagingOptions} {...this.props} /&
&GrxPagingBeforeAfter isBefore="true" {...pagingOptions} {...this.props} /&
&GrxPagingList {...pagingOptions} {...this.props} /&
&GrxPagingBeforeAfter isBefore="false" {...pagingOptions} {...this.props} /&
&GrxPagingLast {...pagingOptions} {...this.props} /&
&GrxPagingInfo {...this.props} /&
42 /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
* 分页条头组件
* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
45 class GrxPagingFirst extends Component {
render() {
var ids = []
let paging = this.props.items.get('Paging')
let current = paging.get('PagingIndex')
let pagingIndex = current - 1
if(paging.get('PagingIndex') != 1){
ids.push(1)
let html = ids.map(
&GrxPagingNumber title={this.props.firstTitle} text={this.props.firstText} pagingIndex={1} {...this.props}/&
&GrxPagingNumber title={this.props.prevTitle} text={this.props.prevText} pagingIndex={pagingIndex} {...this.props}/&
&span className="grx-pagingbar-fl"&
72 /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
* 分页条前后页组件
* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
75 class GrxPagingBeforeAfter extends Component {
render() {
var ids = []
let isBefore = this.props.isBefore == "true" ? true : false
let paging = this.props.items.get('Paging')
let pagingCount = paging.get('PagingCount')
let current = paging.get('PagingIndex')
let pagingIndex = isBefore ? current - this.props.showNumber : current + this.props.showNumber
let title = (isBefore ? this.props.beforeTitle : this.props.afterTitle) + (this.props.showNumber + 1) + this.props.pagingTitle
if(isBefore && current & this.props.showNumber + 1){
ids.push(1)
}else if(!isBefore && current & pagingCount - this.props.showNumber){
ids.push(1)
var html = ids.map(
(v,i) =& &a href="###" onClick={this.props.actions.pagingAction.bind(this, pagingIndex)} title={title}&..&/a&
104 /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
* 分页条页码列表组件
* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
107 class GrxPagingList extends Component {
let paging = this.props.items.get('Paging')
let count = paging.get('PagingCount')
let current = paging.get('PagingIndex')
let start = current - this.props.showNumber
let end = current + this.props.showNumber
var pageIndexs = new Array();
for(var i = i & i ++) {
if( i == current){
pageIndexs.push(i)
}else if(i & 0 & i &= count) {
pageIndexs.push(i)
var pagingList = pageIndexs.map(
current == v ?
count & 1 ? &span className="grx-pagingbar-current"&{v}&/span& : ""
&GrxPagingNumber pagingIndex={v} {...this.props} /&
{pagingList}
140 /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
* 分页条尾部组件
* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
143 class GrxPagingLast extends Component {
render() {
var ids = []
let paging = this.props.items.get('Paging')
let pagingCount = paging.get('PagingCount')
let current = paging.get('PagingIndex')
let pagingIndex = current + 1
if(paging.get('PagingIndex') & paging.get('PagingCount')){
ids.push(1)
let html = ids.map(
&GrxPagingNumber title={this.props.nextTitle} text={this.props.nextText} pagingIndex={pagingIndex} {...this.props}/&
&GrxPagingNumber title={this.props.lastTitle} text={this.props.lastText} pagingIndex={pagingCount} {...this.props} /&
&span className="grx-pagingbar-fl"&
171 /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
* 分页页码组件
* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
174 class GrxPagingNumber extends Component {
let pagingIndex = this.props.pagingIndex
let title = "第"+ pagingIndex + this.props.pagingTitle
let text = pagingIndex
if(this.props.title){
title = this.props.title
if(this.props.text){
text = this.props.text
&a href="###" onClick={this.props.actions.pagingAction.bind(this, pagingIndex)} title={title}& {text} &/a&
194 /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
* 分页条信息组件
* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
197 class GrxPagingInfo extends Component {
render() {
let paging = this.props.items.get('Paging')
let pagingIndex = paging.get('PagingIndex')
let pagingCount = paging.get('PagingCount')
let totalRecord = paging.get('TotalRecord')
&span className="grx-pagingbar-info"&第{pagingIndex}/{pagingCount}页,共{totalRecord}条数据&/span&
209 /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
* 从此模块导出分页条组件
* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
212 export default GrxPagingBar
使用方法：
1 import React, { Component } from 'react'
2 import _ from 'lodash'
3 import classNames from 'classnames'
4 import PagingBar from '.paging-bar'
6 /* ================================================================================
* React PagingBar使用范例组件
* ================================================================================ */
9 class PagingBarExample extends Component {
render() {
let pagingOptions = {
showNumber: 3
&table className="table table-condensed"&
&PagingBar pagingOptions={pagingOptions} {...this.props} /&
附上Paging这个分页数据对象的结构paging.go服务端的Data Struct：
1 package commons
3 import (
Paging struct {
PagingIndex int64
PagingSize
TotalRecord int64
PagingCount int64
17 func (paging *Paging) SetTotalRecord(totalRecord int64) {
//paging.PagingIndex = 1
paging.PagingCount = 0
if totalRecord & 0 {
paging.TotalRecord = totalRecord
paging.PagingCount = int64(math.Ceil(float64(paging.TotalRecord) / float64(paging.PagingSize)))
26 func (paging *Paging) Offset() int64 {
if paging.PagingIndex &= 1 || paging.PagingSize == 0 {
offset := (paging.PagingIndex * paging.PagingSize) - paging.PagingSize + 1
return offset
36 func (paging *Paging) EndIndex() int64 {
if paging.PagingIndex &= 1 {
return paging.PagingSize
offset := paging.PagingIndex * paging.PagingSize
return offset
感谢园子里的亲们，2016新年快乐*_^。
Blog Stats
Trackbacks - 20}