reactjs - react : Reactstrap pagination active not working inside loop

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 进行迭代器声明，以避免闭包

   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
     }