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

【问题标题】：How to render three elements of each time? React每次如何渲染三个元素？反应
【发布时间】：2018-09-09 01:49:10
【问题描述】：

我希望每次只渲染数组numbers 的三个元素。

每次我都会点击 em next 来更改数字。

例如：在屏幕上：123，我点击按钮，将出现，456 及以后。

我的代码：

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')
)

&lt;div id="root"&gt;&lt;/div&gt;

【问题讨论】：

标签： reactjs

【解决方案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>));
}

【讨论】：

【解决方案2】：

使用 slice 方法从 this.state.numbers 中提取三个元素，并使用 map 函数对其进行映射。

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

另外，当你在 jsx 中渲染一个函数时，你必须调用函数而不是传递它的值

<h1>Elements: {this.elementsOnScreen()} </h1>

this.elementsOnScreen 将传递函数，它不会运行函数。要运行该函数并返回其值，您必须执行this.elementsOnScreen()。

【讨论】：