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()的{{1}}中创建一个数组：

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

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

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

2 个答案: