reagieren Rendering Liste Artikel

Question

Kann mir bitte jemand mit dem untenstehenden Code helfen? Komponente funktioniert gut, aber es ist nicht Listenelemente machen, bin ich nicht in der Lage, einen Weg zu finden, die Listenelemente zurück in Render-Funktion

import React from 'react' 
import PageLinks from './PageLinks' 

const PaginationSection = React.createClass({ 

onClickHandle (pageNumber) { 
this.props.pageNumberClicked(pageNumber) 
}, 

    renderPageNumbers() { 
    let page = 1; 
    console.log('inside render'); 
    while (page < this.props.totalPages) { 
     console.log(this.props.totalPages); 
     console.log(page); 
     if (page == this.props.currentPage) { 
     <li key={page}><span>&nbsp;</span></li> 
     } 
     else { 
     <li key={page}><PageLinks pageNumber={page} onPageClick={this.onClickHandle} /></li> 
     } 
     page++; 
    } 
    }, 

    render() { 
    return (
     <div> 
     { 
      this.props.totalPages > 1 
      ? <ul className="pagination"> 
       {this.renderPageNumbers()} 
      </ul> 
     : <div>&nbsp;</div> 
     } 
     </div> 
)} 
}) 

export default PaginationSection 

Answer 1

Sie müssen zurückkehren Anordnung von Elementen aus renderPageNumbers Methode, zB:

renderPageNumbers() { 
    let page = 1; 
    const pages = []; 
    while (page < this.props.totalPages) { 
    if (page == this.props.currentPage) { 
     pages.push(<li key={page}><span>&nbsp;</span></li>); 
    } 
    else { 
     pages.push(<li key={page}><PageLinks pageNumber={page} onPageClick={this.onClickHandle} /></li>); 
    } 
    page++; 
    } 
    return pages; 
},