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

反应渲染列表项

1 个答案: