Question

我试图在反应js中为我的分页制作一个内联循环，但是如果有人知道如何去做它似乎并不好奇。

目前我正在这样做：

<ul class="pagination">
  <li>
    <a href="#" aria-label="Previous">
      <span aria-hidden="true">«</span>
    </a>
  </li>
  {this.state.searching ? 
    ''
    :

    Code for page buttons here

    }
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">»</span>
      </a>
    </li>
  </ul>

我正在使用bootstrap分页，所以我真的不需要任何样式，但问题是我希望它根据搜索返回的内容动态更改显示的页数。

我想在每页显示3个结果，结果数量存储在我的状态中作为amountofjobs

TL：DR创建循环以根据搜索不起作用动态显示分页页面按钮。

我试图这样做：

for(i = 0; i < this.state.amountofjobs / 3; i++){
  with normal jsx/html here to display but it kept saying i was missing an expression
}

Answer 1

您可以返回一个数组

Document

class Hello extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {

        var pagesArray = [];
        for (var i = 0; i < this.props.pages; i++) {
            pagesArray.push(<li>{i}</li>);
        }

        return(
            <li>
                 {pagesArray}
            </li>
        );
    }
}

ReactDOM.render(
  <Hello pages={5} />,
      document.getElementById('container')
);

工作fiddle

Inline React JS For Loop for Pagination

1 个答案: