Question

我很喜欢通过和数组进行映射，以便为数组中的每个数字渲染某些内容。但是，使用数字完成同一件事的有效方法是什么。

我发现自己处于这样的情况：我有一个integer代表页数，一个组件<Page>带有道具pageNumber。

我已准备好以下渲染功能：

renderPages() {
  for (let i = 1; i < this.state.numPages; i++) {
    return <Page pageNumber={1} />;
  }
}

在我的类renderPages函数中，render函数的实现如下：

render() {
  return (
    <div>
      {this.renderPages()}
    </div>
  );
}

我了解到，一旦出现第一个退货，renderPages就会退出。因此最后只渲染第一页。如何在此处呈现更多页面？

Answer 1

附加到数组，然后返回数组。

renderPages() {
    const arr = []
  for (let i = 1; i <-this.state.numPages; i++) {
    arr.push(<Page pageNumber={1} />)
  }
    return arr
}

或者您可以通过创建一个空数组来执行此操作而无需使用函数

render() {
  return (
    <div>
      {(new Array(this.state.numPages)).map((item, i)=><Page pageNumber={i} />)}
    </div>
  );
}

Answer 2

renderPages() {
    const arr = []
  for (let i = 1; i <-this.state.numPages; i++) {
    arr.push(<Page pageNumber={1} />)
  }
    return arr
}

render() {
  return (
    <div>
      {this.renderPages().map((item)=>(item))}
    </div>
  );
}

Answer 3

还有另一个首选项（简称）：

https://stackoverflow.com/a/51335795/9206753（我以前的回答）

要循环多次并返回，可以在from和map的帮助下实现：

  <div>
    {Array.from(Array(this.state.numPages)).map((item, index) =>
      <Page key={index} pageNumber={index + 1} />
    )}
  </div>

希望有帮助

根据数字而不是通过数组映射呈现多个元素

3 个答案: