reactjs - React：Reactstrap 分页活动在循环内不起作用

Question

我想在状态 == 循环索引时将项目设置为活动状态。但我每次都变得虚假。

        constructor(props) {
          super(props);
          this.state = {
            currentPage: this.props.currentPage
          };
         }
       render() {
            var lis = [];
            for (var i=1; i <= this.props.totalPages; i++) {
              lis.push(
                <PaginationItem
                  key={i}
                  active={
                    this.state.currentPage === {i} ? true : false
                  }
                >
                  <PaginationLink href="javascript:void(0)" onClick={this.handlePageClick.bind(this, i)} >
                    {i}
                  </PaginationLink>
                </PaginationItem>
              );
            }
}

Answer 1

问题是您正在根据 props in 设置状态，constructor如果 props 更改它不会更新，您也需要更新componentWillReceiveProps函数中的状态。但是，您可以直接使用道具而无需将其设置为状态。也使用let代替var迭代器声明来避免closures

   render() {
        var lis = [];
        for (let i=1; i <= this.props.totalPages; i++) { // use let here to avoid closure
          lis.push(
            <PaginationItem
              key={i}
              active={
                this.props.currentPage === i ? true : false
              }
            >
              <PaginationLink href="javascript:void(0)" onClick={this.handlePageClick.bind(this, i)} >
                {i}
              </PaginationLink>
            </PaginationItem>
          );
        }
        // more code here
     }