我正在尝试创建一个mixin，它有助于分解我正在构建的分页组件的一些代码。它自己的代码可以在this jsfiddle运行。您必须检查页面以在运行时查看错误，但实质上是：this.setPrevious()，this.setNext()和this.createPageBlocks()被视为＆＃34;未定义＆＃34;。我根本不相信，我怎么可能做错了什么？
完整代码如下所示。当我在console.log(PaginationMixin); render() Pagination中执行/** @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);
时，会看到类（对象）。所以我要么错误地创建mixins，要么错误地加载它们，无论哪种方式我都不知道为什么我会得到＆＃34; undefined不是函数＆＃34;
{{1}}
答案 0 :(得分：5)
您在定义之前使用PaginationMixin。所以你将undefined混合到你的班级。您可以在创建课程之前移动mixin定义来解决此问题。
此外，您需要在mixin方法中将pageNumber更改为this.pageNumber。
此处更新了一段有效的代码：fiddle