Question

我正在使用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，并且在使用分页时可以销毁插入元素，但是我觉得那太过分了应该是一个更简单的解决方案。

Answer 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>

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

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

1 个答案: