React实现数组分页渲染：每次展示3个元素并支持翻页

嘿，我来帮你搞定这个React分页的需求！你的现有代码已经搭好了基础的状态框架，但还需要补充几个关键逻辑才能实现正确的分页展示和边界控制，避免出现越界的情况。

完整实现代码 #

class Contador extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      elementsPerPage: 3,
      currentPage: 0,
      numbers: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    };
    this.nextPage = this.nextPage.bind(this);
  }

  nextPage() {
    // 计算最大允许的页码，避免越界
    const maxPage = Math.floor((this.state.numbers.length - 1) / this.state.elementsPerPage);
    if (this.state.currentPage < maxPage) {
      this.setState(prevState => ({
        currentPage: prevState.currentPage + 1
      }));
    }
  }

  render() {
    const { elementsPerPage, currentPage, numbers } = this.state;
    // 计算当前页要展示的元素范围
    const startIndex = currentPage * elementsPerPage;
    const endIndex = startIndex + elementsPerPage;
    const currentItems = numbers.slice(startIndex, endIndex);

    // 计算是否是最后一页，用于控制按钮状态
    const isLastPage = currentPage === Math.floor((numbers.length - 1)/elementsPerPage);

    return (
      <div>
        <h3>当前页内容</h3>
        <ul>
          {currentItems.map(num => (
            <li key={num}>{num}</li>
          ))}
        </ul>
        <button onClick={this.nextPage} disabled={isLastPage}>
          下一页
        </button>
      </div>
    );
  }
}

ReactDOM.render(<Contador />, document.getElementById('root'));

关键逻辑说明 #

• 截取当前页元素：使用数组的slice(startIndex, endIndex)方法，根据当前页码和每页显示数量，精准截取要展示的片段。比如初始currentPage=0时，截取0-3的索引，对应元素1、2、3；点击后currentPage=1，截取3-6，对应4、5、6，以此类推。
• 边界控制：计算maxPage（最大允许的页码），在nextPage方法里判断当前页码是否小于maxPage，只有满足条件才更新页码，避免出现空内容的情况。
• 按钮状态优化：判断是否是最后一页，如果是就禁用「下一页」按钮，提升用户体验，避免无效点击。

另外，我用了prevState来更新currentPage，这是React官方推荐的方式——当新状态依赖于旧状态时，使用函数式的setState可以避免异步更新带来的问题。

内容的提问来源于stack exchange，提问作者Jota