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

问题是您是根据 constructor 中的 props 设置状态，如果 props 发生变化，它不会更新，您也需要更新 componentWillReceiveProps 函数中的状态。但是，您可以直接使用 props 而无需将其设置为 state。还使用 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
     }

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

React: Reactstrap pagination active not working inside loop

reactjs

reactstrap