react渲染列表項

Question

有人可以幫我用下面的代碼嗎？組件工作正常，但它不是渲染列表項，我無法找到一個方法來返回渲染功能列表中的項目

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

你需要從renderPageNumbers方法返回元素的數組，例如：

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; 
},