Сделать пагинацию в React с петлей переменной длины

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, и я нашел соответствующее решение здесь: Как скрыть элементы, не занимая их место на странице?