为什么我变得未定义不是函数，ReactJs

Question

我正在尝试创建一个mixin，以帮助分解我正在构建的分页组件的一些代码。 自身的代码可以在此jsfiddle上运行。 运行该页面时，您必须检查该页面以查看错误，但实际上： this.setPrevious() ， this.setNext()和this.createPageBlocks()被视为“未定义”。 我根本不认为那是正确的，我怎么可能做错了什么？

完整的代码可以在下面看到。 当我做一个console.log(PaginationMixin); 在Pagination的render() ，可以看到类（对象）。 所以我要么创建不正确的mixins或错误地加载了它们，要么都不知道为什么我会得到“ undefined is a function”

/** @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);

Answer 1

您正在使用PaginationMixin然后再对其进行定义。 因此，您将undefined混入类中。 您可以通过在创建类之前移动混合定义来解决此问题。

此外，您需要更改pageNumber到this.pageNumber在你的mixin的方法。

更新，可以正常工作，代码在这里： 小提琴