Javascript 使用ReactJS.net创建寻呼机。

如何使用.NETMVC在reactJS中创建寻呼机。我正在尝试使用js.net。请帮我做传呼机，如下图所示

---

这是一个解决方案，寻呼机上只显示6个页码。左侧和右侧提供6页以上的导航。希望这个能帮助你们

var GridPagerTest = React.createClass({
getInitialState : function(){
        return {
                startIndex : 1,
                visibleNumber : 5
        }
    },
 handleNextPageNumber : function(nextIndex)
{
   this.setState({startIndex:nextIndex});
},
    render : function(){
        var li = [];
        var pageCount = this.props.Size;
        var endVisibleNumber = this.state.startIndex + this.state.visibleNumber;
        var endIndex = pageCount;
        if(pageCount > endVisibleNumber)
        {
            endIndex = endVisibleNumber;
        }

        for(var i = this.state.startIndex ; i<=endIndex; i++){
            if(this.state.startIndex != 1 && this.state.startIndex == i)
            {
                li.push(<li key={i - 1}><a href="#" onClick={ ()=> this.handleNextPageNumber( (this.state.startIndex -1) - this.state.visibleNumber )}> <div className="glyphicon glyphicon-chevron-left"></div></a></li>);
            }

            if(this.props.currentPage == i){
                li.push(<li key={i} className="active"><a href="#">{i}</a></li>);
            }
            else{
                li.push(<li key={i}><a href="#" onClick={this.props.onPageChanged.bind(null,i)}>{i}</a></li>);
            }

            if(pageCount > endIndex && endIndex == i)
            {
                li.push(<li key={i + 1}><a href="#" onClick={ ()=> this.handleNextPageNumber(i)}><div className="glyphicon glyphicon-chevron-right"></div></a></li>);
            }
        }
        return (<ul className="pagination">{li}</ul>);
    }
});

var ShowPager=React.createClass({
pageChanged : function(pageNumber,e){
},
render : function(){
        return(
 <GridPagerTest Size={50} onPageChanged={this.pageChanged} currentPage={1} />
);
}
});

React.render(<ShowPager />, document.getElementById('PagingTest'));

var GridPagerTest=React.createClass({
getInitialState:函数（）{
返回{
startIndex:1，
浏览号码：5
}
},
handleNextPageNumber:函数（nextIndex）
{
this.setState（{startIndex:nextIndex}）；
},
render:function（）{
var li=[]；
var pageCount=this.props.Size；
var endVisibleNumber=this.state.startIndex+this.state.visibleNumber；
var endIndex=pageCount；
如果（页面计数>endVisibleNumber）
{
endIndex=endVisibleNumber；
}
对于（var i=this.state.startIndex；i endIndex&&endIndex==i）
{
li.push（
）；
}
}
返回（
{li}
）；
}
});
var ShowPager=React.createClass({
pageChanged:功能（页码，e）{
},
render:function（）{
返回(
);
}
});
React.render（，document.getElementById（'PagingTest'））；