内联反应JS用于分页循环

Question

我正在尝试为我在react 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个结果，结果量存储在我的状态中，作为金额jobs

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

您可以返回数组

文档。

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

工作小提琴