如何渲染每次的三个元素？反应

Question

我希望每次只呈现数组numbers中的三个元素。

每次我将单击emnext来更改数字。

例如：在屏幕上:123，我点击了在按钮，会出现456和以上。

MyCode：

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 () {
   this.setState({ currentPage: this.state.currentPage + 1 });
    console.log(this.state.currentPage)  
  }
  
  elementsOnScreen () {
    this.state.numbers.map((number)=>
      <li>{number}</li>)
  }
  
  render() {
    return (
      <div>
        <h1>Elements: {this.elementsOnScreen} </h1>
      <h1>Current Page: {this.state.currentPage}</h1>
      <button onClick={this.nextPage}> next </button>
        </div>
    );
  }
}

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

<div id="root"></div>

Answer 1

可以使用array.prototype.slice（）：

elementsOnScreen () {
  const { currentPage, numbers, elementsPerPage } = this.state;
  return numbers
    .slice(currentPage*elementsPerPage, currentPage*elementsPerPage + elementsPerPage + 1)
    .map(number => (<li>{number}</li>));
}