在 React 中使用可变长度循环进行分页答案

【问题标题】：Make pagination in React with variable length loop在 React 中使用可变长度循环进行分页
【发布时间】：2019-01-09 05:58:23
【问题描述】：

我正在使用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，并且可能在使用分页时破坏插入元素，但我觉得这有点过分，应该有一个更简单的解决方案。

【问题讨论】：

标签： javascript reactjs pagination

【解决方案1】：

目前我使用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>

因此，在由UltimatePaginationBootstrap4 调用的函数onChange = {this.changedDiffGenes} 内部（这是从react-ulitmate-pagination github 页面复制粘贴的代码）我在display 属性之间来回切换block和none。这肯定比使用d3 插入/删除元素更容易，我在这里找到了相关解决方案：How to hide elements without having them take space on the page?

【讨论】：