1
내가 만들고있는 페이지 매김 구성 요소의 일부 코드를 해독하는 데 도움이되는 mixin을 만들려고합니다. 코드 자체는 this jsfiddle에서 실행할 수 있습니다. 페이지를 검사하여 실행시 오류를 확인해야하지만 기본적으로 this.setPrevious(), this.setNext() 및 this.createPageBlocks()은 "정의되지 않은"것으로 간주됩니다. 내가 옳은 것으로 믿지 않는 것은, 내가 어쩌면 뭔가 잘못하고있는 것일까 요?정의되지 않은 이유는 무엇입니까? ReactJs
아래에서 전체 코드를 볼 수 있습니다. render()이 Pagination 인 console.log(PaginationMixin);을 수행하면 클래스 (개체)가 표시됩니다. 그러니 내가 잘못이나 mixin을 만드는 오전거나 잘못을로드, 내가 무엇입니까 왜 아무 생각이 없다 어느 쪽이든가 정의하기 전에 PaginationMixin를 사용하는
/** @jsx React.DOM */
var Pagination = React.createClass({
mixins: [PaginationMixin],
popTypes: {
totalPages: React.PropTypes.number.isRequired,
currentPage: React.PropTypes.number.isRequired,
maxPagesForDisplay: React.PropTypes.number.isRequired
},
getDefaultProps: function() {
return {
href: '',
totalPages: 0,
currentPage: 1,
maxPagesForDisplay: 10
};
},
render: function() {
this.setPrevious();
this.setNext();
return(
<div>
<ul className="pagination">
<li className={this.activePreviousClass}><a href={this.previousHref}>{'<<'}</a></li>
{this.createPageBlocks()}
<li className={this.activeNextClass}><a href={this.nextHref}>{'>>'}</a></li>
</ul>
</div>
);
}
});
// Pagination Mixin
var PaginationMixin = {
activePreviousClass: '',
activeNextClass: '',
previousHref: '#',
nextHref: '#',
pageNumber: 0,
createArrayoFPages: function() {
var pageBlocks = new Array();
var page = 0;
var totalPages = this.props.totalPages +1;
while (page < totalPages) {
pageBlocks[page++] = page;
}
return pageBlocks;
},
setPrevious: function() {
if (Number(this.props.currentPage) === 1) {
this.activePreviousClass = 'disabled';
} else {
this.pageNumber = Number(this.props.currentPage) - 1;
this.previousHref = '#' + this.props.href + pageNumber;
}
},
setNext: function() {
if (Number(this.props.currentPage) === this.props.totalPages + 1){
this.activeNextClass = 'disabled';
} else {
this.pageNumber = Number(this.props.currentPage) + 1;
this.nextHref = '#' + this.props.href + pageNumber;
}
},
createPageBlocks: function() {
console.log('asdasdsa')
var pages = this.createArrayoFPages().map(function(page){
var currentActivePage = '';
if (Number(this.props.currentPage) === page) {
currentActivePage = 'active';
}
return(
<li className={currentActivePage}><a href={"#" + this.props.href + page}>{page}</a></li>
);
}.bind(this));
return pages;
}
}
React.render(<Pagination totalPages={5} currentPage={2} maxPagesForDisplay={10} href={'#'} />, document.body);