返回内部 for 循环会中断循环

Question

我正在尝试根据我的应用程序中的 pageCount 值呈现一定数量的 div。我的做法如下

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

所以这里pageCount 我得到的值是 5。我想渲染 5 个 div，但是返回时，循环中断。我该如何解决这个问题？

Answer 1

正如您所注意到的，由于return，您的循环提前中断。相反，您可以渲染一个 JSX 数组。一种方法是在您的 renderPages 和 .push() 您的 <div>s 中创建一个数组：

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

Answer 2

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