ReactJs + BootStrap + Pager 分页

好吧，用ReactJs做功能，结果又要分页了，跟分页真是剪不断的猿粪啊，跟JQuery的相比，ReactJs中全是组件，以下为具体代码

var PagerLink = React.createClass({
	clickEvent:function(){
		if(this.props.className.indexOf('disabled')<0 && this.props.className.indexOf('active')<0){
			this.props.callBack(this.props.index);
		}
	},
	render: function() {
		return (
			<li className={this.props.className} onClick={this.clickEvent}><a href="javascript:void(0)">{this.props.text}</a></li>
		);
	}
});

var Pager = React.createClass({
	getInitialState: function() {
		return {
			goIndex:'' 
		};
	},
	getDefaultProps: function() {
		return {
			totalCount:0,
			firstText:'First',
			prevText:'Prev',
			nextText:'Next',
			lastText:'Last',
			showLinkNum:10 ,//如果设置小于0的数字，那么则不显示数字标签
			alwaysShow:true,//当总页数只有一页时是否显示
			goWidth:50,//跳转输入框的宽度
			recordTextFormat: '{0}/{1}' //{0}对应当前页 {1}对应总页数 {2}对应总记录数 如果不希望显示此部分内容，将此部分赋空值
		};
	},
	callBack:function(index){
		this.props.callBack(index);
	},
	getPageLink: function(p){
		return <PagerLink key={p.Key} text={p.Text} index={p.Index} className={p.ClassName} callBack={this.callBack}/>;
	},
	goIndexChanged:function(e){
		var n = parseInt(e.target.value);
		var v='';
		if(!isNaN(n)&&n>0){
			v= Math.min(n,this.getTotalPages())+'';
		}
		this.setState({goIndex:v});
	},
	getTotalPages:function(){
		return Math.ceil(this.props.totalCount / this.props.pageSize);
	},
	goClicked:function(){
		var idx = ~~this.state.goIndex -1;
		if(idx>=0&& idx!=this.props.pageIndex){
			this.callBack(idx);
			this.setState({goIndex:''});
		}
	},
	render: function() {
		var display='';
		if(!this.props.alwaysShow || this.props.totalCount == 0){
			display = this.props.totalCount<=this.props.pageSize?'none':'';
		}
		var totalPages = this.getTotalPages();
		var arr=[];
		var prevDisplay = 0==this.props.pageIndex?'disabled':'';
		var lastDisplay = totalPages-1==this.props.pageIndex?'disabled':'';
		arr.push(
			this.getPageLink({
				Key : "F",
				Text :  this.props.firstText,
				Index : 0,
				ClassName : prevDisplay
			})
		);
		arr.push(
			this.getPageLink({
				Key : "P",
				Text :  this.props.prevText,
				Index : Math.max(this.props.pageIndex - 1,0),
				ClassName : prevDisplay
			})
		);
		if(this.props.showLinkNum > 0){
			//PageIndex从0开始计算
			var startIndex = ~~(this.props.pageIndex / this.props.showLinkNum) * this.props.showLinkNum;
			var endIndex = Math.min(startIndex + this.props.showLinkNum,totalPages);
			for(var i=startIndex;i<endIndex;i++){
				arr.push(
					this.getPageLink({
						Key : i,
						Text :  i + 1,
						Index : i,
						ClassName : i==this.props.pageIndex?'active':''
					})
				);
			}
		}
		arr.push(
			this.getPageLink({
				Key : "N",
				Text :  this.props.nextText,
				Index : Math.min(this.props.pageIndex + 1,totalPages - 1),
				ClassName : lastDisplay
			})
		);
		arr.push(
			this.getPageLink({
				Key : "L",
				Text :  this.props.lastText,
				Index : totalPages - 1,
				ClassName : lastDisplay
			})
		);
		if(totalPages>this.props.showLinkNum){//显示快速跳转输入框
			arr.push(
				<li key="G">
					<div className="input-group" style={{display:'inline-block',float:'left'}}>
						<input type="text" className="form-control" maxLength={(totalPages+"").length} value={this.state.goIndex} onChange={this.goIndexChanged} style={{width:this.props.goWidth}} />
						<span className="input-group-btn" style={{display:'inline-block'}}>
							<button className="btn btn-default" onClick={this.goClicked} type="button">Go</button>
						</span>
					</div>
				</li>
			);
		}
		if(this.props.recordTextFormat.length>0){//显示文本
			arr.push(
				<li key="T" style={{marginLeft:5}}>
					<span>{this.props.recordTextFormat.replace(/\{0\}/g, this.props.pageIndex + 1)
					.replace(/\{1\}/g, totalPages).replace(/\{2\}/g, this.props.totalCount)}</span>
				</li>
			);
		}
		return (
			<ul className="pagination" style={{margin: '0px 0px',display:display}}>
				{arr}
			</ul>
		);
	}
});

因为分页不可能作为一个单独的组件存在，所以这里的示例代码写在render方法里

render: function() {
		var pagerSetting={
			totalCount:this.state.TotalCount,
			pageSize:this.state.PageSize,
			pageIndex:this.state.PageIndex,
			firstText:"首页" ,
			prevText:"上一页",
			nextText:"下一页",
			lastText:"尾页",
			recordTextFormat: "{0}/{1}页 共{2}条记录",
			//showLinkNum:2,
			callBack:this.pageIndexChanged
		};
		return (
			<div className="panel-body">
				<Pager {...pagerSetting} />
			</div>
		);
	}

效果截图