代码之家 › 专栏 › 技术社区 › CraZyDroiD

返回内部for循环会打破循环

reactjs javascript

-1

CraZyDroiD · 技术社区 · 5 年前

我试图根据 pageCount 我在应用程序中的价值。我的方法如下

render() {
  const { pageCount } = this.props;
  function renderPages() {
    for (let i = 0; i < pageCount; i++) {
      return <div>{i}</div>;
    }
  }
  return <div style={{ textAlign: "center" }}>{renderPages()}</div>;
}

所以在这里 页数 我得到的值是5。我想渲染5个div,但返回时循环中断。我该怎么解决这个问题?

0 回复 | 直到 5 年前

Nick Parsons Felix Kling 5 年前

正如你所注意到的,由于 return 。相反,您可以渲染JSX数组。一种方法是在您的 renderPages 和 .push() 你的 <div> 其中包括:

function renderPages() {
  const divs = [];
  for (let i = 0; i < pageCount; i++){
    divs.push(<div>{i}</div>);
  }
  return divs;
}

return (
  <div style={{textAlign:'center'}}>
    {renderPages()}
  </div>
)

或者,您可以使用以下命令填充数组 Array.from() 具有映射功能:

function renderPages() {
  return Array.from({length: pageCount}, (_, i) => <div>{i}</div>);
}

return (
  <div style={{textAlign:'center'}}>
    {renderPages()}
  </div>
)

void 5 年前

在for循环中返回总是会破坏循环。因此,您可以使用 .map 阅读更多 here

render(){
    const {pageCount} = this.props;
    function renderPages(){
        return new Array(pageCount).map((item, index) => (
            <div>{item}</div>
        ));
    }
    return (
        <div style={{textAlign:'center'}}>
            {renderPages()}
        </div>
    )
}

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

7 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

7 月前

Alex · 在轻量级中同时解构和不解构变量

7 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

7 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

7 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

7 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

7 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

7 月前

user3472810 · Angular@Output/EventEmitter返回undefined

7 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

7 月前