代码之家 › 专栏 › 技术社区 › Barry Michael Doyle

基于数字渲染多个元素,而不是通过数组映射

rendering loops reactjs javascript

Barry Michael Doyle · 技术社区 · 7 年前

我发现自己陷入了一个 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>
  );
}

我知道一旦第一次返回已退出。所以最后它只呈现第一页。如何在此处呈现更多页面?

3 回复 | 直到 7 年前

Barry Michael Doyle 7 年前

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>

Roopak PutheVeettil 7 年前

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

Anurag Awasthi 7 年前

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

推荐文章

BlurKid · R中for循环时结果的奇怪差异

1 年前

Costinean Sebastian · 如何优化使用for循环处理大型数组的MATLAB脚本的执行时间?"

1 年前

bigjdawg43 · 迭代多个数据帧中的列并有条件地执行操作

2 年前

Colin · 缩短嵌套文件夹名称

2 年前

xhamsterIT · 循环VBA Microsoft Excel

2 年前

Nico44044 · 使用for循环遍历Django模型字段

2 年前

chanbo chung · 如何在聚合中获得所有可能的组合

2 年前

Himanshu · 无法在逐行二进制搜索中迭代2D数组中的所有行

2 年前

Sonia Acosta · 如何在python for while循环中获取下一个用户输入?[副本]

2 年前

stephr · 循环为多个变量选择最接近另一个日期的日期

2 年前