代码之家 › 专栏 › 技术社区 › Nikita Vlasenko

使分页与变长循环发生反应

pagination reactjs javascript

Nikita Vlasenko · 技术社区 · 6 年前

我正在使用 react ultimate pagination 进行分页功能。单击页码时,我正在更新变量以显示所需内容。问题是我有一个循环,它可以有可变数量的元素,所以我不知道提前有多少元素。代码如下:

{
      this.state.fullAnalysisDone && this.state.activeKey == 3 ? 
      <div>
      {
        this.get_analysis_charts(this.chartTypes[parseInt(this.state.activeKey)]).map((chart_arr, idx) => {
          return <div style={{visibility: this.state.currPageDiffGenes === (idx + 1) ? 'visible' : 'hidden' }}>
            <img src = {chart_arr[0]} style = {{height:"400px", width:"500px"}}/>
            <img src = {chart_arr[1]} style = {{height:"400px", width:"500px"}}/>
            </div>
        })
      }
        <div style = {{marginLeft: '35%'}}>
          <UltimatePaginationBootstrap4 key = 'diff_genes_pagination' 
                          totalPages = {this.get_analysis_charts(this.chartTypes[parseInt(this.state.activeKey)]).length}
                          onChange = {this.changedDiffGenes}
                          currentPage = {this.state.currPageDiffGenes}/>
        </div>    
      </div>
    : ""
  }

我不能真的离开这里 <div style={{visibility: this.state.currPageDiffGenes === (idx + 1) ? 'visible' : 'hidden' }}> 因为它占用了页面的空间。如果我事先知道迭代次数,我就可以做以下工作:

{
        this.state.currPageDiffGenes === 1 ?
        loop over but return only the 1st element
       :""
}

{
        this.state.currPageDiffGenes === 2 ?
        loop over but return only the 2nd element
        :""
}

...

它可以工作,因为每次都会重新创建元素,但是我不能用变长循环来完成。我们如何解决这个问题?我正在使用 d3 在应用程序中,所以我可以分配 ids 给各自的 divs 可能会在使用分页时破坏插入元素,但我觉得这太过分了,应该有一个更简单的解决方案。

1 回复 | 直到 6 年前

Nikita Vlasenko 6 年前

目前我用 D3 使用 display 财产,但它可能是反对 React -做事的方式。这是可行的,但如果有一个解决方案,我会选择另一个:

changedDiffGenes = (pageNum) => {
  let prevId = '#diff_chart_' + (this.state.currPageDiffGenes - 1);
  let currId = '#diff_chart_' + (pageNum - 1);
  d3.select(prevId).style("display","none");
  d3.select(currId).style("display","block");
  this.setState({
    currPageDiffGenes: pageNum
  })
}

{
        this.get_analysis_charts(this.chartTypes[parseInt(this.state.activeKey)]).map((chart_arr, idx) => {
          return <div id = {'diff_chart_' + idx} style={{display: idx === 0 ? 'block' : 'none', 
                    visibility: this.state.currPageDiffGenes === (idx + 1) ? 'visible' : 'hidden' }}>
            <img src = {chart_arr[0]} style = {{height:"200px", width:"300px"}}/>
            <img src = {chart_arr[1]} style = {{height:"200px", width:"300px"}}/>
            </div>
        })
      }
       <div style = {{marginLeft: '35%'}}>
          <UltimatePaginationBootstrap4 key = 'diff_genes_pagination' 
                          totalPages = {this.get_analysis_charts(this.chartTypes[parseInt(this.state.activeKey)]).length}
                          onChange = {this.changedDiffGenes}
                          currentPage = {this.state.currPageDiffGenes}/>
        </div>

所以,在函数内部 onChange = {this.changedDiffGenes} 由调用 UltimatePaginationBootstrap4 (这是从 react-ulitmate-pagination github page)我来回切换 显示 属性介于 block 和 none . 它肯定比使用 d3 我在这里找到了相关的解决方案: How to hide elements without having them take space on the page?